这篇文章主要介绍了html5中不同图片资源跨域画布污染如何解决的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇html5中不同图片资源跨域画布污染如何解决文章都会有所收获，下面我们一起来看看吧。

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

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

letcount=0;letbgImg=document.creatElement('img');letqrImg=document.creatElement('img');bgImg.src=redirectUrl('x.png');qrImg.src=redirectUrl('y.png');[bgImg,qrImg].forEach((e)=>{e.onload=()=>{count++;if(count===2){drawerImg(bgImg,qrImg);}}})functionredirectUrl(url){return'https://xxx/view?fileUrl='+encodeURIComponent(url);}functiondrawerImg(imgContent,qrContent,scaleBy=2){let{bgImgW,bgImgH}={375,800};let{qrx,qry,qrw,qrh}={20,700,50,50};letCanvas=document.createElement('canvas');letctx=Canvas.getContext("2d");Canvas.width=bgImgW*scaleBy;Canvas.height=bgImgH*scaleBy;ctx.drawImage(imgContent,0,0,bgImgW*scaleBy,bgImgH*scaleBy);ctx.drawImage(qrContent,qrx*scaleBy,qry*scaleBy,qrw*scaleBy,qrh*scaleBy);letnodeI=document.createElement("img");nodeI.src=Canvas.toDataURL();document.body.appendChild(nodeI)}

关于“html5中不同图片资源跨域画布污染如何解决”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“html5中不同图片资源跨域画布污染如何解决”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。