우리는 배경 이미지와 동적으로 생성된 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 = () => { 개수 ++; if (count === 2) { DrawerImg(bgImg, qrImg); } }})function RedirectUrl (url) { return 'https://xxx/view?fileUrl=' + encodeURIComponent(url);}함수 drawImg(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 * scaleBy(imgContent, 0, 0, bgImgW * scaleBy, bgImgH * scaleBy); ctx.drawImage(qrContent, qrx * scaleBy, qry * scaleBy, qrw * scaleBy, qrh * scaleBy); Canvas.toDataURL(); document.body.appendChild(nodeI)}위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.