We want to draw a picture, which includes a background image and a dynamically generated QR code. The premise is that the background image is a static resource of the project itself, and the QR code is dynamically generated by the server, and the two are not under the same domain name.
Solution: Redirect all images to the same domain name:
let count = 0;let 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)}The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.