Queremos hacer un dibujo, que incluye una imagen de fondo y un código QR generado dinámicamente. La premisa es que la imagen de fondo es un recurso estático del proyecto en sí, y el código QR lo genera dinámicamente el servidor, y los dos son. no bajo el mismo nombre de dominio.
Solución: redirigir todas las imágenes al mismo nombre de dominio:
let count = 0;let bgImg = document.creatElement('img');let qrImg = document.creatElement('img');bgImg.src = redirigirUrl('x.png');qrImg.src = redirigirUrl( 'y .png');[bgImg, qrImg].forEach((e) => { e.onload = () => { contar ++; if (count === 2) { cajónImg(bgImg, qrImg); } }})función redirecciónUrl (url) { retorno 'https://xxx/view?fileUrl=' + encodeURIComponent(url);}función 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); Lienzo.height= bgImgH * scaleBy; ctx.drawImage(imgContent, 0, 0, bgImgW * scaleBy, bgImgH * scaleBy); ctx.drawImage(qrContent, qrx * scaleBy, qry * scaleBy, qrw * scaleBy, qrh * scaleBy); Canvas.toDataURL(); documento.body.appendChild(nodoI)}
Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.