1 introduction

1.1 Service Scenarios

The picture is stored in the background. According to the address of the picture, view the picture in the VUE page and mark the designated area according to the coordinates.

Due to browser mechanisms, images downloaded using window.location.href are not saved locally, but opened in the browser.

2 Implementation Principles

2.1 Drawing a Canvas

<el-dialog
    title="View pictures"
    :visible.sync="dialogJPG"
    append-to-body>
    <canvas id="mycanvas" width="940" height="570"></canvas>
</el-dialog>
Copy the code

For interactive experience, we use the Element-UI popover mode. I put canvas canvas in the popover.

To highlight the canvas effect, you can set a border in the CSS.

#mycanvas {
    border: 1px solid rgb(199, 198, 198);
}
Copy the code

2.2 Drawing pictures

// imageUrl provides the image address for the backgrounddoDraw(imageUrl){// Get canvas var canvas = document.getelementById ("mycanvas") // Make sure you get var a = because of the popoversetInterval(() =>{// get canvas = document.getelementById ("mycanvas")
        if(! canvas){return false
        } elseVar context = canvas.getContext() {clearInterval(a);'2d'Var img = new Image() img.src = imageUrl // load the Image img.onload =function() {if(img.complete){// Resets the canvas length and width based on the image canvas.setattribute ("width",img.width)
                    canvas.setAttribute("height"Img. Height) / / draw the picture context. The drawImage (img, 0, 0, img width, img. Height)}}}}, 1)},Copy the code

For context. DrawImage (), see W3school

2.3 Drawing a Rectangle

context.strokeStyle = "red"
context.lineWidth = 3;
context.strokeRect(x, y, width, height)
Copy the code

Context is the same definition as above

StrokeStyle rectangle color

LineWidth Width of the rectangle border

X,y,width,height Rectangle position lengthened width

2.4 Drawing Lines

context.moveTo(x1,y1) 
context.lineTo(x2,y2)
context.strokeStyle = "red"
context.lineWidth = 3;
context.stroke()
Copy the code

(x1,y1) (x2,y2) the starting and ending coordinates of a line

StrokeStyle lineWidth Style of a line

2.5 Drawing Text

context.font = "26px Arial bolder"
context.fillStyle = 'red'
context.fillText(text,x,y)
Copy the code

Font fillStyle Indicates the text style

Text Text content

X,y text display coordinates

2.6 Downloading Images

// downIamge (imgsrc, name) {let image = new Image()
    image.setAttribute('crossOrigin'.'anonymous')
    image.onload = function () {
        let canvas = document.createElement('canvas')
        canvas.width = image.width
        canvas.height = image.height
        let context = canvas.getContext('2d')
        context.drawImage(image, 0, 0, image.width, image.height)
        let url = canvas.toDataURL('image/jpg') 
        let a = document.createElement('a')
        let event = new MouseEvent('click')
        a.download = name
        a.href = url
        a.dispatchEvent(event)
    }
    image.src = imgsrc
},
Copy the code

3 afterword.

This is just to list the basic use of canvas, and more design is needed for specific interaction and presentation.

Thank you for your support. If insufficient, welcome to point out, mutual encouragement.

If you like it, please like it and thank you 😂

Welcome to my: [Github] [Nuggets] [Jane book] [CSDN] [OSCHINA] [SF]

3.1 Reference Materials

  • W3school



This article adoptsCreative Commons Attribution – Non-commercial Use – Same way Share 4.0 International LicenseGrant permission.

Source: github.com/xrkffgg/Too…