一、首先要保障多张图片加载完成才能去合成张图片
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(),