Kami ingin menggambar, yang mencakup gambar latar belakang dan kode QR yang dihasilkan secara dinamis. Premisnya adalah bahwa gambar latar belakang adalah sumber daya statis dari proyek itu sendiri, dan kode QR dibuat secara dinamis oleh server, dan keduanya adalah sumber daya statis. tidak dalam nama domain yang sama.
Solusi: Alihkan semua gambar ke nama domain yang sama:
biarkan hitung = 0;biarkan bgImg = document.creatElement('img');biarkan qrImg = dokumen.creatElement('img');bgImg.src = redirectUrl('x.png');qrImg.src = redirectUrl( 'y .png');[bgImg, qrImg].forEach((e) => { e.onload = () => { menghitung ++; jika (hitungan === 2) { laciImg(bgImg, qrImg); } }})fungsi redirectUrl (url) { return 'https://xxx/view?fileUrl=' + encodeURIComponent(url);}fungsi laciImg(imgContent, qrContent, scaleBy = 2) { biarkan {bgImgW, bgImgH} = {375, 800}; {qrx, qry, qrw, qrh} = {20, 700, 50, 50}; biarkan Canvas = document.createElement('canvas'); biarkan ctx = Canvas.getContext(2d); Kanvas.tinggi= bgImgH * scaleBy; ctx.drawImage(imgContent, 0, 0, bgImgW * scaleBy, bgImgH * scaleBy); ctx.drawImage(qrContent, qrx * scaleBy, qry * scaleBy, qrw * scaleBy, qrh * scaleBy); Canvas.toDataURL(); dokumen.body.appendChild(nodeI)}
Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.