<template>
<view style="width: 100%; height: 100%;">
<image :src="imagePath" lazy-load style="width: 100%; height: 100%;"></image>
<canvas
style="background-color: red;"
:style="{width: target.width + 'px', height: target.height + 'px'}" canvas-id="target"></canvas>
</view>
</template>
<script>
export default {
data() {
return {
targetContext: null,
imagePath: '',
target: {
width: 300,
height: 300
}
}
},
onLoad(e) {
console.log(e);
// this.imagePath = e.imagepath;
this.targetContext = uni.createCanvasContext("target", this); //第一个画布
this.imageDetailMsg(e.imagepath);
},
methods: {
imageDetailMsg(imageUrl) {
let self = this;
uni.getImageInfo({
src: imageUrl,
success: function(imageInfo) {
console.log(imageInfo);
setTimeout(() => {
self.targetContext.drawImage(imageInfo.path, 0, 0, 300, 300, 0, 0, 300, 300);
self.targetContext.draw(false, () => {
uni.canvasToTempFilePath({
canvasId: "target",
fileType:'jpg',
success: (res) => {
var path = res.tempFilePath;
console.log('裁剪后的图片',res);
self.imagePath = path;
},
fail: (ev) => {
console.log(ev);
},
complete: () => {
}
}, self);
});
}, 100);
}
})
},
}
}
</script>
<style>
</style>