canvas画布导出报图片污染,Promise.all异步多图转base64代码实例

canvas画布导出报图片污染
Promise.all异步多图转base64代码实例

<img class="tobase64img" src="src1">
<img class="tobase64img" src="src2">

data(){
	return {
		isload:false
	}
},
mounted(){
	let load_arr = [];//初始化的所有异步行为
	let els = document.getElementsByClassName('tobase64img');
	for (let i = 0; i < els.length; i++) {
	  load_arr.push(this.loadimg(els[i]))
	}
	Promise.all(load_arr).then((res) => {
     this.$nextTick(() => {
        this.isload = true;//加载完成
      })
    })
},
methods:{
	loadimg(el) {
	  return new Promise((resolve, reject) => {
	    var request = new XMLHttpRequest();
	    let src = el.src;
	    request.open('GET', src + "?" + Math.random(), true);
	    request.responseType = "blob";
	    request.onload = () => {
	      this.blobToDataURL(request.response, (url) => {
	        el.setAttribute('src', url)
	        resolve()
	      })
	    };
	    request.onerror = error => reject(error);
	    request.send();
	  })
	},
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

夜雨风亭

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值