Detailed explanation of the image cropping function in the vue project

yarn install cropperjs

<canvas :id="" ref="canvas"></canvas>

// Draw pictures on canvasdrawImg () {
 this.$nextTick(() => {
 // Get the canvas node let canvas = ()
 if (canvas) {
 // Set the width of canvas to the width of the parent element of canvas, with an aspect ratio of 3:2 let parentEle = 
  = 
  = 2 *  / 3
 let ctx = ('2d')
 (0, 0, , )
 let img = new Image()
  = 'Anonymous'
  = 
  = function () {
 (img, 0, 0, , )
 }
 }
 })
}

// Introduceimport Cropper from 'cropperjs'

// Show cropping boxinitCropper () {
 let cropper = new Cropper(this.$, {
 checkCrossOrigin: true,
 viewMode: 2,
 aspectRatio: 3 / 2
 })
}

cropImg () {
 let canvas = (.img_url)
 let ctx = ('2d')
 let img = new Image()
  = function () {
 (img, 0, 0, , )
 }
  = 
 let drag = false // Whether to drag the rectangle let flag = false // Whether to draw a rectangle let rectWidth = 0 // Draw the width of the rectangle let rectHeight = 0 // Draw the height of the rectangle let clickX = 0 // The rectangle starts drawing X coordinates let clickY = 0 // The rectangle starts drawing Y coordinates let dragX = 0 // When you want to drag the rectangle to click X coordinate let dragY = 0 // When you want to drag the rectangle to click on it let newRectX = 0 // Drag the X coordinates that the rectangle begins to draw after the change let newRectY = 0 // Drag the Y coordinates that the rectangle begins to draw after the change // Press the mouse  = e => {
 // If there is a drawn rectangular box before each click, draw it through the path and use it for the following judgment ()
 ([6, 6])
 (newRectX, newRectY)
 (newRectX + rectWidth, newRectY)
 (newRectX + rectWidth, newRectY + rectHeight)
 (newRectX, newRectY + rectHeight)
 (newRectX, newRectY)
  = 'green'
 ()
 // Every time you click, decide whether to re-draw or move the rectangle box by determining whether the mouse clicks is inside or outside the rectangle box. if ((, )) {
 drag = true
 dragX = 
 dragY = 
 clickX = newRectX
 clickY = newRectY
 } else {
 (0, 0, , )
 (img, 0, 0, , )
 flag = true
 clickX = 
 clickY = 
 newRectX = 
 newRectY = 
 }
 }
 // Mouse lift  = () => {
 if (flag) {
 flag = false
 (clickX, clickY, rectWidth, rectHeight)
 }
 if (drag) {
 drag = false
 (newRectX, newRectY, rectWidth, rectHeight)
 }
 }
 // Mouse move  = (e) => {
 if (flag) {
 (0, 0, , )
 (img, 0, 0, , )
 rectWidth =  - clickX
 rectHeight =  - clickY

 ()
  = '#FF0000'
 (clickX, clickY, rectWidth, rectHeight)
 ()
 }
 if (drag) {
 (0, 0, , )
 (img, 0, 0, , )
 ()
 newRectX = clickX +  - dragX
 newRectY = clickY +  - dragY
  = 'yellow'
 (newRectX, newRectY, rectWidth, rectHeight)
 ()
 }
 }
},
// Get the cropped parameters and you can process the pictures yourselfsureCrop (x, y, width, height) {
 let canvas = (.img_url + 'after')
 // Set the width of canvas to the width of the parent element of canvas, with an aspect ratio of 3:2 let parentEle = 
  = 
  = 2 *  / 3
 let ctx = ('2d')
 let img = new Image()
  = 
  = function () {
 ()
 (x, y)
 (x + width, y)
 (x + width, y + height)
 (x, y + height)
 ()
 (img, 0, 0, , )
 }
 ()
}