Realize the style

Mainly through the mouse to the image area selection, and then the image will be downloaded and gray processing

The implementation code

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>watermarking</title>
    <style>
    .container{
        margin-top: 50px;
    }
    .edit{
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .edit-item{
        position: relative;
        width: 100px;
        height: 34px;
        background-color: salmon;
        color: #fff;
        line-height: 34px;
        text-align: center;
        border-radius: 5px;
        cursor: pointer;
        margin-right: 20px;
    }
    .edit-item input{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0
    }
    .previwe{
        display: flex;
        align-items: center;
        margin-top: 100px;
    }

    canvas{
        width: 800px;
        display: block;
        background-color: #eee;
    }
    img{
        object-fit: contain;
        margin-left: 100px;
    }
    </style>
</head>
<body>
    <div class="container">
        <div class="edit">
            <div class="edit-item">
                <span>Upload background Image</span>
                <input type="file" id="bgImage">
            </div>
            <div class="edit-item" id="selected">
                <span>Download selected area</span>
            </div>
            <div class="edit-item" id="gray">
                <span>Gray processing</span>
            </div>
        </div>
        <div class="previwe">
            <canvas id="myCanvas" width="800" height="600"></canvas>
            <img src="" alt="" id="showImage">
        </div>
    </div>
<script src="./utils.js"></script>
<script>
    let bgImage = document.getElementById('bgImage')
    let selected = document.getElementById('selected')
    let showImage = document.getElementById('showImage')
    let gray = document.getElementById('gray')
    let canvas = document.getElementById('myCanvas')
    let ctx = canvas.getContext('2d')
    let bgImageData = {},selectData = {}
    bgImage.addEventListener('change',waterMarkChange,false)
    
    function waterMarkChange(){
        const file = bgImage.files[0]
        let type = file.type
        if(type.indexOf('image') = = -1){
            alert('Only images are supported, please re-upload')
        }
        getImageData(file)
    }

function getImageData(file){
    let image = new Image()
        image.src = window.URL.createObjectURL(file)
        image.onload = function(){
        bgImageData.data = image
        bgImageData.width = image.width
        bgImageData.height = image.height
        let x = canvas.width / 2 - bgImageData.width / 2
        let y = canvas.height / 2 - bgImageData.height / 2
        bgImageData.x = x , bgImageData.y = y
        putImageData()
    }
}

function putImageData(){
  ctx.clearRect(0.0,canvas.width,canvas.height)
  ctx.drawImage(bgImageData.data,bgImageData.x,bgImageData.y,bgImageData.width,bgImageData.height)
}

selected.addEventListener('click'.function(){
    // Fetch the canvas data
    if(selectData.data){
        let bas64 = returnImageUrl(selectData.data)
        let blobData = C.dataURLToBlob(bas64)
        C.download(blobData)
    }
})

gray.addEventListener('click'.function(){
    if(selectData.data){
        selectData.data = C.grey_processing(selectData.data)
        showImage.src = returnImageUrl(selectData.data)
    }
})
canvas.addEventListener('mousedown',mousedown,false)
canvas.addEventListener('mousemove',mousemove,false)
canvas.addEventListener('mouseup',mouseup,false)
let mouse = C.getMousePosition(canvas)
let isMoving = false
let initX = 0,initY = 0
function mousedown(){
    isMoving = true
    initY = mouse.y
    initX = mouse.x
}

function mousemove(){
   if(isMoving){
    putImageData()
    ctx.save()
    ctx.strokeStyle = '#fff'
    selectData.width = Math.abs(mouse.x - initX)
    selectData.height = Math.abs(mouse.y - initY)
    if(selectData.width && selectData.height){
        selectData.data = ctx.getImageData(initX,initY,selectData.width,selectData.height)
        showImage.width = selectData.width,showImage.height = selectData.height
        showImage.src = returnImageUrl(selectData.data)
    }
    ctx.strokeRect(initX,initY,selectData.width,selectData.height)
    ctx.restore()
  }

}

function mouseup(){
    isMoving = false
    initY = initX = 0
}

// Create a new canvas for downloading images
function returnImageUrl(data){
    let canvasElm = document.createElement('canvas')
    let ctxElm = canvasElm.getContext('2d')
    canvasElm.width = showImage.width , canvasElm.height = showImage.height
    ctxElm.putImageData(data,0.0)
    return canvasElm.toDataURL('image/png'.1)}</script>
</body>

</html>
Copy the code

utils.js

// Convert coordinates
C.getMousePosition = (el) = >{
        let mouse = {x:0.y:0}
        el.addEventListener('mousemove'.(e) = >{
        let {x,y} = C.eventWrapper(e)
        mouse.x = x
        mouse.y = y
    })
    return mouse
}
C.eventWrapper = function(e){
    let {pageX, pageY, target} = e
    let {left,top} = target.getBoundingClientRect() // Get the element's position relative to the viewport
    return {x : pageX - left ,y: pageY - top}
}
// Download bloB object data
C.download = (blob) = >{
    // Create a bloB link
    let url = URL.createObjectURL(blob)
    let a = document.createElement('a')
    a.setAttribute('download', url)
    a.href=url ;
    a.style.display = 'none'
    a.click()
    // Each time url.createObjecturl is called, a new URL object is created, and a reference to this object is kept in the browser's memory
    // This memory is freed only when the document is destroyed
    // After the URL is used, it is best to free this part of memory for performance reasons
    URL.revokeObjectURL(url)
}

// Convert base64 to blob objects
C.dataURLToBlob = (code) = > {
    let parts = code.split('; base64,')
    let contentType = parts[0].split(':') [1]
    let raw = window.atob(parts[1])
    let rawLength = raw.length
    let uInt8Array = new Uint8Array(rawLength)
    for(let i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i)
    }
    return new Blob([uInt8Array], {
        type: contentType
    })
}

// Perform gray processing on the image data
C.grey_processing = (imageData) = >{
    let data = imageData.data
    for(let i = 0; i < data.length ; i+=4) {let avg = 0
    avg = (data[i]+data[i+1]+data[i+2) /3
        data[i] = data[i+1] = data[i+2] = avg
    }
    return imageData
}
Copy the code

Steps:

  • Image upload now goes to Canvas and displays the image
    • drawImageTo get the image on the canvas
  • Select in the interactive area with mouse and canvas to obtain the picture data
    • Mainly to usemouseup|mousemove|mousedownEvent for event interaction
    • usingputImageData|getImageDataTo obtain the image data of the culture