canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法

我们要绘制一张图片，内容包括一张背景图和一个动态生成的二维码，前提是背景图是项目本身的静态资源，二维码是服务端动态生成的，二者不在同一域名下。

解决办法：把所有图片都重定向同一个域名下：

1. let count = 0;
2. let bgImg = document.creatElement('img');
3. let qrImg = document.creatElement('img');
4. bgImg.src = redirectUrl('x.png');
5. qrImg.src = redirectUrl('y.png');
6. [bgImg, qrImg].forEach((e) => {
7. e.onload = () => {
8. count ++;
9. if (count === 2) {
10. drawerImg(bgImg, qrImg);
11. }
12. }
13. })
14. function redirectUrl (url) {
15. return 'https://xxx/view?fileUrl=' + encodeURIComponent(url);
16. }
17. function drawerImg (imgContent, qrContent, scaleBy = 2) {
18. let {bgImgW, bgImgH} = {375, 800};
19. let {qrx, qry, qrw, qrh} = {20, 700, 50, 50};
20. let Canvas = document.createElement('canvas');
21. let ctx = Canvas.getContext("2d");
22. Canvas.width = bgImgW * scaleBy;
23. Canvas.height= bgImgH * scaleBy;
24. ctx.drawImage(imgContent, 0, 0, bgImgW * scaleBy, bgImgH * scaleBy);
25. ctx.drawImage(qrContent, qrx * scaleBy, qry * scaleBy, qrw * scaleBy, qrh * scaleBy);
26.  
27. let nodeI = document.createElement("img");
28. nodeI.src = Canvas.toDataURL();
29. document.body.appendChild(nodeI)
30. }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。