标题有点绕,问题是这样的:小程序用canvas绘制一包含图片的内容使用自带的API:drawImage,然后将其生成图片保存到相册,pc端模拟器可以完美实现,然而真机生成图片没有所绘制的图片
原因是这样的:
首先看小程序官方文档上drawImage的用法:
const ctx = wx.createCanvasContext('myCanvas')
wx.chooseImage({
success: function(res){
//res.tempFilePaths[0] 为图片网络路径
ctx.drawImage(res.tempFilePaths[0], 0, 0, 150, 100);
ctx.draw();
}
})
结果是 渲染失败
下面是解决方法
小程序的canvas绘制图片,图片路径必须为本地的路径,而不能是网络路径。
因此在绘制网络图片时必需先将其保存到本地然后在绘制。当我们在加载一个带有图片的页面时,图片都会被暂存到本地,由此我们可以通过wx.gerImageInfo接口访问本地的暂存路径来调用drawImage方法绘制图片。如下:(注意网络图片的地址一定要在合法域名内)
//获取网络图片本地路径
wx.getImageInfo({
src: that.data.qrCodeUrl,//服务器返回的图片地址
success: function (res) {
//res.path是网络图片的本地地址
let Path = res.path; //把网络地址变成 canvas 可以识别的地址
that.setData({
localQrCodeUrl: Path
})
},
fail: function (res) {
//失败回调
}
});
wx.chooseImage({
success: function(res){
//res.tempFilePaths[0] 为图片网络路径
ctx.drawImage(localQrCodeUrl, 0, 0, 150, 100);
ctx.draw();
}
})
现在就成功了