上图是开发工具显示
上图是iphonex 真机显示 ；保存下来后如上图第二张图
css部分
#myCanvas{
border: 1rpx solid red;
width: 320rpx;
height: 320rpx;
margin-left: calc((100% - 320rpx) / 2);
margin-top: 20rpx;
}
.loadingImage{
width: 320rpx;
height: 320rpx;
border: 1rpx solid red;
margin-left: calc((100% - 320rpx) / 2);
margin-top: 20rpx;
}
html部分
<canvas type="2d" id="myCanvas"></canvas>
<image show-menu-by-longpress class="loadingImage" src="{{imgData}}"></image>
<text class="top_text">长按上图保存图片</text>
js部分
loadingImg: async function (img, url){
await new Promise(resolve => {
img.onload = resolve;
img.src = url;
});
},
onReady: function () {
const that = this;
this.query = wx.createSelectorQuery()
this.query.select('#myCanvas')
.fields({ node: true, size: true })
.exec((res) => {
that.canvas = res[0].node;
that.ctx = that.canvas.getContext('2d');
const image = that.canvas.createImage();
that.loadingImg(image,'/img/tx-1.png').then(()=>{
that.ctx.drawImage(image, 0, 0, that.canvas.width,that.canvas.height);
setTimeout(()=>{
wx.canvasToTempFilePath({
canvas: that.canvas,
success(res) {
that.setData({imgData: res.tempFilePath});
console.log(that.data.imgData)
},
fail(err) {
console.log(err)
}
})
},100);
});
});
}
