客户有一个需求,前端生成海报,用微信的canvas原生接口,前端生成需要下载每一张图片,图片的大小文章都可以在后台自定义,既多张图片合成的海报,但是客户用的图片都是在天猫淘宝等其他网站,前端生成海报需要下载到本地,一开始是用 wx.downloadFile ,微信限制所有的网络请求必须设置在微信后台设置安全域名,客户每一个商品的图片都是来着不同的网站域名,没办法全部设置安全域名,然后我过年花了两天时间慢慢的尝试出下面的方法,可以在不设置安全域名的前提下将网络图片下载到本地。
// item:{width:图片的宽度,height:图片的高度,src:图片地址}
// 不确定图片宽高的情况可以只传地址,获取成功会包括临时地址跟图片的宽高一起返回
// 最后拿到本地路径
// 图片用完后调用一下removeUnsafeList,不然垃圾缓存太多了
unsafeReadDownPicInfo(item){
return new Promise((resolve,reject)=>{
const query = this.createSelectorQuery()
query.select('#temp_anquan_id')
.fields({ node: true, size: true })
.exec((res) => {
const canvas = res[0].node
const ctx = canvas.getContext('2d')
let frontImg = canvas.createImage()
frontImg.src = item.src;
frontImg.onload = (res) => {
let width = item.width ? item.width : frontImg.width;
let height = item.height ? item.height : frontImg.height;
canvas.width = width;
canvas.height = height;
ctx.drawImage(frontImg, 0, 0, width, height);
let imgSrc = canvas.toDataURL('image/png');
var imgPath = wx.env.USER_DATA_PATH+'/poster_'+this.randomWord(5,10)+ '.png';
var imageData = imgSrc.replace(/^data:image\/\w+;base64,/, "");
var fs = wx.getFileSystemManager();
fs.writeFileSync(imgPath, imageData, "base64");
this.data.unsafeList.push(imgPath);
resolve({img:imgPath,width,height});
}
frontImg.onerror = (e) => {
let msg = "图片加载出错,检查图片地址是否存在,能不能在浏览器正常打开,能的话在服务端响应的 header 中指定合理的 Content-Type 字段,以保证客户端正确处理文件类型。";
this.setData({
errorFlag:true,
rrorMsg:"图片地址:"+item.src+','+msg
})
}
})
})
},
removeUnsafeList(){
var fs = wx.getFileSystemManager();
for(let item of this.data.unsafeList){
fs.unlinkSync(item);
}
this.data.unsafeList=[];
},
randomWord(min,max){ //随机获取字符串
let str=(new Date()).valueOf();
let range=min;
let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
if(arguments.length==2){
range=Math.round(Math.random()*(max-min))+min;
}
for (var i = 0; i < range; i++) {
let pos = Math.round(Math.random() * (arr.length - 1));
str += arr[pos];
}
return str;
},
<canvas type="2d" id="temp_anquan_id" style=""></canvas>
获取到的临时地址就可以进行海报生成了,跟wx.downloadFile下载的一样可以操作,但只支持图片。
感谢qiang老师,问题已解决