vueプロジェクトの中で写真の裁断機能を実現します。

プレゼンテーションアドレス
https://my729.github.io/picture-crop-demo/dist/#/
前言

vueバージョン：3.6.3 https://cli.vuejs.org/zh/

cropperjs：1.5.1 https://github.com/fengyuanchen/cropperjs

element UI https://element.eleme.io/#/zh-CN

cropperjsプラグインとオリジナルcanvasを使って、写真の裁断機能を実現します。
cropperjsプラグインを使う
cropperjsをインストールします

yarn install cropperjs

canvas元素を初期化して、上に絵を描きます。

<canvas :id="data.src" ref="canvas"></canvas>

//  canvas     
drawImg () {
 this.$nextTick(() => {
 //   canvas  
 let canvas = document.getElementById(this.data.src)
 if (canvas) {
 //   canvas   canvas      ，   3:2
 let parentEle = canvas.parentElement
 canvas.width = parentEle.offsetWidth
 canvas.height = 2 * parentEle.offsetWidth / 3
 let ctx = canvas.getContext('2d')
 ctx.clearRect(0, 0, canvas.width, canvas.height)
 let img = new Image()
 img.crossOrigin = 'Anonymous'
 img.src = this.data.src
 img.onload = function () {
 ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
 }
 }
 })
}

canvasがドメインをまたいでピクチャーをかくことに出会うならば、ピクチャーimg.crosOrigin='Anonymous'を設定して、そしてサーバーの応答ヘッドはAccess-Coontrol-Originを設定します。
cropperjsを作成します

//   
import Cropper from 'cropperjs'

//      
initCropper () {
 let cropper = new Cropper(this.$refs.canvas, {
 checkCrossOrigin: true,
 viewMode: 2,
 aspectRatio: 3 / 2
 })
}

その他の方法と属性は、公式サイトを参照してください。https://github.com/fengyuanchen/cropperjs
具体的な実現は、ソースコードのcropper.vueまたはcropper.one.vueコンポーネントを見ることができます。
cropper.vueコンポーネント：https://github.com/MY729/picture-crop-demo/blob/master/src/components/cropper.vue
cropper.one.vueコンポーネント：https://github.com/MY729/picture-crop-demo/blob/master/src/components/cropper.one.vue
canvasを使って写真の裁断を実現します。
マウスのトリミング枠の描画とトリミング枠の移動をサポートします。
考え方:

はcanvasに画像を描くことを背景にしています。

マウスのクリック、移動、解除イベントを監督する

canvasのisPointInPath()方法：与えられた点の座標がパス内にある場合(パスの端を含む)はfalseに戻ります。
具体的な実現はソースコードのcropper.canvas.vueコンポーネントを見ることができます：https://github.com/MY729/picture-crop-demo/blob/master/src/components/cropper.canvas.vue

cropImg () {
 let canvas = document.getElementById(this.data.img_url)
 let ctx = canvas.getContext('2d')
 let img = new Image()
 img.onload = function () {
 ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
 }
 img.src = this.data.src
 let drag = false //       
 let flag = false //       
 let rectWidth = 0 //       
 let rectHeight = 0 //       
 let clickX = 0 //       X  
 let clickY = 0 //       Y  
 let dragX = 0 //          X  
 let dragY = 0 //          Y  
 let newRectX = 0 //             X  
 let newRectY = 0 //             Y  
 //     
 canvas.onmousedown = e => {
 //                ，        ，       
 ctx.beginPath()
 ctx.setLineDash([6, 6])
 ctx.moveTo(newRectX, newRectY)
 ctx.lineTo(newRectX + rectWidth, newRectY)
 ctx.lineTo(newRectX + rectWidth, newRectY + rectHeight)
 ctx.lineTo(newRectX, newRectY + rectHeight)
 ctx.lineTo(newRectX, newRectY)
 ctx.strokeStyle = 'green'
 ctx.stroke()
 //     ，                  ，              
 if (ctx.isPointInPath(e.offsetX, e.offsetY)) {
 drag = true
 dragX = e.offsetX
 dragY = e.offsetY
 clickX = newRectX
 clickY = newRectY
 } else {
 ctx.clearRect(0, 0, canvas.width, canvas.height)
 ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
 flag = true
 clickX = e.offsetX
 clickY = e.offsetY
 newRectX = e.offsetX
 newRectY = e.offsetY
 }
 }
 //     
 canvas.onmouseup = () => {
 if (flag) {
 flag = false
 this.sureCrop(clickX, clickY, rectWidth, rectHeight)
 }
 if (drag) {
 drag = false
 this.sureCrop(newRectX, newRectY, rectWidth, rectHeight)
 }
 }
 //     
 canvas.onmousemove = (e) => {
 if (flag) {
 ctx.clearRect(0, 0, canvas.width, canvas.height)
 ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
 rectWidth = e.offsetX - clickX
 rectHeight = e.offsetY - clickY

 ctx.beginPath()
 ctx.strokeStyle = '#FF0000'
 ctx.strokeRect(clickX, clickY, rectWidth, rectHeight)
 ctx.closePath()
 }
 if (drag) {
 ctx.clearRect(0, 0, canvas.width, canvas.height)
 ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
 ctx.beginPath()
 newRectX = clickX + e.offsetX - dragX
 newRectY = clickY + e.offsetY - dragY
 ctx.strokeStyle = 'yellow'
 ctx.strokeRect(newRectX, newRectY, rectWidth, rectHeight)
 ctx.closePath()
 }
 }
},
//         ，       
sureCrop (x, y, width, height) {
 let canvas = document.getElementById(this.data.img_url + 'after')
 //   canvas   canvas      ，   3:2
 let parentEle = canvas.parentElement
 canvas.width = parentEle.offsetWidth
 canvas.height = 2 * parentEle.offsetWidth / 3
 let ctx = canvas.getContext('2d')
 let img = new Image()
 img.src = this.data.src
 img.onload = function () {
 ctx.beginPath()
 ctx.moveTo(x, y)
 ctx.lineTo(x + width, y)
 ctx.lineTo(x + width, y + height)
 ctx.lineTo(x, y + height)
 ctx.clip()
 ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
 }
 ctx.stroke()
}

ソースアドレス
https://github.com/MY729/picture-crop-demo
直接cloneプロジェクトができます。ローカル運行はコードと効果を確認します。
以上はこの文章の全部の内容です。本文の内容は皆さんの学習や仕事に対して一定の参考学習価値を持ってほしいです。ありがとうございます。