多张图片合成一张图片、兼容问题总结

一、首先要保障多张图片加载完成才能去合成张图片

1，传统实现方式

var img = [],

flag = 0,

mulitImg = [

_this.config.host + '/bargain.jpg',

_this.config.qrcodeUrl + '?appId=' + assibargain.qrCode.appId + '&page=' + assibargain.qrCode.page + '&scene=' + encodeURIComponent(assibargain.qrCode.scene) + '&time=' + new Date().getTime(),

];

var imgTotal = mulitImg.length;

for (var i = 0; i < imgTotal; i++) {

img[i] = new Image()

img[i].src = mulitImg[i]

// if (i == 1) {

// img[i].crossOrigin = 'Anonymous';

// }

img[i].onload = function () {

//第i张图片加载完成

flag++

if (flag == imgTotal) {

//全部加载完成

// context.drawImage(img[0], 0, 0, 750, 1155);

// context.drawImage(img[1], 270, 730, 220, 220);

// var imgdata = canvas.toDataURL('image/png');

// $('.bargain-pic-exp').html("<img width=85% class='cavasp' height=85% src='" + imgdata + "' alt='from canvas'/>");

}

}

}

2,多张图片（结合ES6 Promise.all()）实现—自行查找

二，在测试过程中图一个域名合成是没有问题，在调试中使用的是外域的域名过程报错

外域的域名

 

window.location.protocol + '//jzt.daojia.com/httpservice/mina/qrcode'

当前的域名

window.location.protocol + '//' + window.location.host,

assibargain.js:55 Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

at Image.img.(anonymous function).onload (https://static.djtest.cn/isdfe/coupon2.0/src/assibargain/assibargain.js:55:46)

上网查找解决方案

img.crossOrigin = 'Anonymous';

相应的外域的域名支持当前域名的跨域，做完之后测试谷歌没有问题

三、经过一段时间，发现safari

Cross-origin image load denied by Cross-Origin Resource Sharing policy.

可能走得是缓存，加上时间戳

_this.config.qrcodeUrl + '?appId=' + assibargain.qrCode.appId + '&page=' + assibargain.qrCode.page + '&scene=' + encodeURIComponent(assibargain.qrCode.scene) + '&time=' + new Date().getTime(),