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 () {
// The i-th image is loaded
flag++
if (flag == imgTotal) {
// all loaded
// 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,
Multiple pictures (combined with ES6 Promise.all()) - find it yourself
Second, there is no problem in the synthesis of a domain name in the test process, but the domain name process of the foreign domain is used in the debugging and an error is reported
foreign domain name
current domain name
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)
Find solutions online
img.crossOrigin = 'Anonymous';
The domain name of the corresponding foreign domain supports the cross-domain of the current domain name, and there is no problem in testing Google after the completion.
3. After a period of time, I found safari
Cross-origin image load denied by Cross-Origin Resource Sharing policy.
May go to the cache, plus timestamp
_this.config.qrcodeUrl + '?appId=' + assibargain.qrCode.appId + '&page=' + assibargain.qrCode.page + '&scene=' + encodeURIComponent(assibargain.qrCode.scene) + '&time=' + new Date().getTime(),