<template>
<div>
<canvas style="height: 500rpx;width: 500rpx;" canvas-id="myCanvas"></canvas>
<image :src="imagePath" style="width: 200rpx;height: 200rpx;"/>
</div>
</template>
<script>
export default {
data(){
return {
imagePath:""
}
},
methods:{
draw(){
let promise1 = new Promise((resolve, reject) =>{
wx.getImageInfo({
src:"https://avatar.csdn.net/F/3/9/3_ruffaim.jpg",
success: function(res) {
console.log("-----------------")
resolve(res);
},
fail:function(res){
console.log("fail-----------------")
reject(res);
}
});
});
promise1.then(res =>{
console.log(res.path);
var ctx = wx.createCanvasContext("myCanvas");
ctx.drawImage(res.path,0,0,100,100);
ctx.draw(false,() =>{
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: 200,
height:200,
canvasId: "myCanvas",
success: (res)=> {
this.imagePath = res.tempFilePath;
},
})
});
}).catch(err =>{
})
}
},
onShow(){
this.draw()
}
}
</script>
