图片地址是https
context.setFontSize(20)context.fillText(name, width / 2 + 6, "50")context.drawImage("https://dl1.loveq.cn/animated_favicon.gif", width / 2 - 64, 12, 50, 50)wx.canvasToTempFilePath({ x: 0, y: 0, width: width, height: height, destWidth: width, destHeight: height, canvasId: '1', success: function (res) { console.log(res.tempFilePath) wx.saveImageToPhotosAlbum({ filePath: res.tempFilePath, success(res) { console.log(res) } }) } |
模拟器的界面正常，控制台都出现了地址，但是手机开发者版本预览，还是显示不了图片，是什么原因？
canvasToTempFilePath需要在draw回调里调用
先用wx.getImageInfo(),将网络图片转换成本地图片
用canvas中的drawImage去画图
但是开发者工具和真机上都看不到图片，求问什么原因
同样问题 层主解决了吗
1.先用wx.getImageInfo(),将网络图片转换成本地图片
2.用canvas中的drawImage去画图
3.wx.canvasToTempFilePath() 将canvas画布转换成图片
4.wx.saveImageToPhotoAlbum() 将图片保存到本地相册
问题：页面刷新第一次进来，图片保存为空，再保存一次显示正常，然后重新刷新进入，仍旧存在上述问题
求大神解决，谢谢啦
这个我也遇到了 用setTimeout可以解决
setTimeout 可以解决。根本原因是什么
getImageInfo，把网络图片转成本地路径，再放进drawImage
如果图片是base64的，如何解决这个问题？
同步下载多个图片
downloadFile(url) {
const that = this;
return new Promise(function (resolve) {
wx.downloadFile({
url,
success: function (downRes) {
if (downRes.statusCode === 200) {
wx.getImageInfo({
src: downRes.tempFilePath,
success: function (info) {
resolve({ info, url: downRes.tempFilePath });
}
});
}
}
});
});
},
downloadFileList(list) {
const that = this;
let pList = [];
for (let i = 0; i < list.length; i++) {
pList[i] = that.downloadFile(list[i]);
}
return Promise.all(pList);
},
that.downloadFileList(imgList).then(urlList => {
//...todo...
});
回复8楼，这种做法是异步，如果出现多幅图片我也暂时没想到办法，循环执行getImageInfo会有问题，图片顺序错乱，你有更好办法，可以这里留言下
昨晚终于找到一个方案。
用downloadFile或者getImageInfo去拿在线图片，绘制一张是没问题的。
但是如果想绘制多张怎么办？遍历下载图片源并绘制。（注意这里需要用到闭包）
一开始我尝试用异步转换同步的方式去控制，发现实现方式有些复杂，而且小程序不支持generator，最后选择了立即函数闭包的方式去实现。
varcanvasImage ='';varpicx = 0;varpicy = 0;varpicwidth = 0;varpicheight = 0;varj = 0;for(vari = 0; i < photoData.length;i++){(function(j){getImageInfoPromisified({src: photoData[j].url}).then(function(res) {canvasImage = res.pathpicx = photoData[j].left / 2;picy = (photoData[j].top - 400) / 2;picwidth = photoData[j].width / 2;picheight = photoData[j].height / 2;ctx.drawImage(canvasImage, picx, picy, picwidth, picheight);ctx.draw(true)}).catch(function() {console.error("get location failed")})})(i)}你这个比getImageInfo要复杂很多 ，差评一个
getImageInfo，把网络图片转成本地路径，再放进drawImage和后续的绘图，这个方法很好用！
我尝试用wx.downloadFile()这个接口保存到本地，但是因为它是异步的，如果能提供一个同步的方法就好了