背景画像と動的に生成された QR コードを含む画像を描画したいと考えています。背景画像はプロジェクト自体の静的なリソースであり、QR コードはサーバーによって動的に生成されるという前提があります。同じドメイン名ではありません。
解決策: すべての画像を同じドメイン名にリダイレクトします。
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);}関数drawerImg (imgContent, qrContent,scaleBy = 2) { let {bgImgW, bgImgH} = {375, 800}; {qrx, qry, qrw, qrh} = {20, 700, 50, 50}; let Canvas = document.createElement('canvas'); let ctx = Canvas.getContext(2d); Canvas.height= bgImgH * ctx.drawImage(imgContent, 0, 0, bgImgW * スケールバイ、bgImgH * スケールバイ); ctx.drawImage(qrContent、qrx * スケールバイ、qry * スケールバイ、qrw * スケールバイ、qrh * スケールバイ); Canvas.toDataURL(); document.body.appendChild(nodeI)}以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。