上图是开发工具显示

上图是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);

});

});

}