图片地址是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,最后选择了立即函数闭包的方式去实现。
var
canvasImage =
''
;
var
picx = 0;
var
picy = 0;
var
picwidth = 0;
var
picheight = 0;
var
j = 0;
for
(
var
i = 0; i < photoData.length;i++){
(
function
(j){
getImageInfoPromisified({
src: photoData[j].url
}).then(
function
(res) {
canvasImage = res.path
picx = 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()这个接口保存到本地,但是因为它是异步的,如果能提供一个同步的方法就好了