Vue uses Canvas to draw pictures, rectangles, lines, text, and download pictures

1 Preface

1.1 Business scenarios

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

Due to the browser's mechanism, when downloading images are not saved locally and will be opened in the browser.

2 Implementation principle

2.1 Drawing canvas

<el-dialog
  title="View pictures"
  :="dialogJPG"
  append-to-body>
  <canvas  width="940" height="570"></canvas>
</el-dialog>

For interactive experience, element-ui pop-up window method is used. Place the canvas canvas in the pop-up window.

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

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

2.2 Draw pictures

// imageUrl provides image address for the backgrounddoDraw(imageUrl){
  // Get canvas  var canvas = ("mycanvas")
  // Because of pop-up window, make sure it has been retrieved  var a = setInterval(() =>{
    // Repeat the    canvas = ("mycanvas")
    if(!canvas){
     return false
    } else {
      clearInterval(a)
      // It can be understood as a brush that can draw paths, rectangles, texts, and images      var context = ('2d')
      var img = new Image()
       = imageUrl
      // Load the picture       = function(){
        if(){
          //Reset the length and width of canvas according to the image          ("width",)
          ("height",)
          // Draw pictures          (img,0,0,,)
        }
      }
    }
  },1)
},

() Method parameters can be described in referenceW3school

2.3 Drawing rectangles

 = "red"
 = 3;
(x, y, width, height)

context same as above definition

strokeStyle Rectangle color

lineWidth rectangle border width

x,y,width,height rectangle position length and width

2.4 Draw lines

(x1,y1) 
(x2,y2)
 = "red"
 = 3;
()

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

strokeStyle lineWidth style

2.5 Draw text

 = "26px Arial bolder"
 = 'red'
(text,x,y)

font fillStyle Text Style

text text content

x,y text display coordinates

2.6 Download pictures

// Image address and image namedownIamge (imgsrc, name) { 
  let image = new Image()
  ('crossOrigin', 'anonymous')
   = function () {
    let canvas = ('canvas')
     = 
     = 
    let context = ('2d')
    (image, 0, 0, , )
    let url = ('image/jpg') 
    let a = ('a')
    let event = new MouseEvent('click')
     = name
     = url
    (event)
  }
   = imgsrc
},

3 Postscript

Here we just list the basic usage of canvas, and specific interactions and displays require more design.

Summarize

The above is what the editor introduced to you. Vue uses Canvas to draw pictures, rectangles, lines, text, and download pictures. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!
If you think this article is helpful to you, please reprint it. Please indicate the source, thank you!