详解vue项目中实现图片裁剪功能

yarn install cropperjs

<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)
 }
 }
 })
}

// 引入
import cropper from 'cropperjs'

// 显示裁剪框
initcropper () {
 let cropper = new cropper(this.$refs.canvas, {
 checkcrossorigin: true,
 viewmode: 2,
 aspectratio: 3 / 2
 })
}

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()
}