How to solve the cross-domain canvas pollution of different picture resources in html5
This article mainly introduces the relevant knowledge of how to solve the cross-domain canvas pollution of different picture resources in html5, the content is detailed and easy to understand, the operation is simple and quick, and has a certain reference value. I believe you will gain something after reading this article on how to solve the cross-domain canvas pollution of different picture resources in html5. Let's take a look.
We need to draw a picture, including a background image and a dynamically generated QR code, provided that the background image is the static resource of the project itself, the QR code is dynamically generated by the server, and they are not under the same domain name.
Solution: redirect all images to the same domain name:
Let count = 0 redirectUrl bgImg = document.creatElement ('img'); let qrImg = 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)) }) function redirectUrl (url) {return 'https://xxx/view?fileUrl=' + encodeURIComponent (url);} function drawerImg (imgContent, qrContent, scaleBy = 2) {let {bgImgW, bgImgH} = {375,800}; let {qrx, qry, qrw, qrh} = {20,700,50,50}; let Canvas = document.createElement (' canvas'); let ctx = 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); let nodeI = document.createElement ("img"); nodeI.src = Canvas.toDataURL () Document.body.appendChild (nodeI)} this is the end of the article on "how to solve the cross-domain canvas pollution of different picture resources in html5". Thank you for reading! I believe you all have a certain understanding of the knowledge of "how to solve cross-domain canvas pollution from different picture resources in html5". If you want to learn more, you are welcome to follow the industry information channel.
