评论

小程序越过安全域名下载图片实现商品海报生成

客户有一个需求,前端生成海报,用微信的canvas原生接口,前端生成需要下载每一张图片,图片的大小文章都可以在后台自定义,既多张图片合成的海报,但是客户用的图片都是在天猫淘宝等其他网站,前端生成海报需

客户有一个需求,前端生成海报,用微信的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下载的一样可以操作,但只支持图片。

最后一次编辑于  2022-05-18  
点赞 2
收藏
评论
登录 后发表内容