confirm(event) {
uni.showLoading({
title: '裁剪中...',
})
const _this = this
const ctx = uni.createCanvasContext('myCanvas', _this);
const pixelRatio = _this.pixelRatio
const imgage = _this.src
const imgW = _this.imageWidth _this.scale;
const imgH = _this.imageHeight _this.scale
const rotate = _this.rotate
let dx = _this.cropOffsertX - _this.x - (_this.imageWidth - imgW) / 2;
let dy = _this.cropOffsertY - _this.y - (_this.imageHeight - imgH) / 2;
ctx.setFillStyle('white')
ctx.fillRect(0, 0, imgW, imgH)
ctx.save()
ctx.rotate((rotate * 90 * Math.PI) / 180);
switch (rotate) {
case 1:
dx += (imgH - imgW) / 2
dy -= (imgH - imgW) / 2
ctx.drawImage(imgage, -dy, dx, imgW, -imgH);
break;
case 2:
ctx.drawImage(imgage, dx, dy, -imgW, -imgH);
break;
case 3:
dx += (imgH - imgW) / 2
dy -= (imgH - imgW) / 2
ctx.drawImage(imgage, dy, -dx, -imgW, imgH);
break;
default:
ctx.drawImage(imgage, -dx, -dy, imgW, imgH);
break;
}
ctx.restore()
ctx.draw(false, () => {
uni.canvasToTempFilePath({
canvasId: 'myCanvas',
destWidth: _this.cropW * pixelRatio,
destHeight: _this.cropH * pixelRatio,
success: (res) => {
uni.hideLoading()
event.detail.tempFilePath = res.tempFilePath
// _this.show = false
_this.$emit('confirm', event)
},
fail: (e) => {
uni.hideLoading()
uni.showModal({
title: '提示',
content: '裁剪失败'
})
},complete: () => {
console.log('无回调')
}
}, _this);
})
},
chenli
这个贴有可复现的示例工程https://ask.dcloud.net.cn/question/103303
2020-09-09 13:46
DCloud_UNI_GSQ
回复 chenli: OK
2020-09-09 20:04