App下載

html5中不同圖片資源跨域畫(huà)布污染怎么解決?canvas畫(huà)布解決方法分享!

猿友 2021-07-27 14:27:34 瀏覽數(shù) (2813)
反饋

最近收到不少小伙伴們私信,這邊小編就來(lái)說(shuō)說(shuō):“html5中不同圖片資源跨域畫(huà)布污染怎么解決?canvas畫(huà)布解決方法分享! ”這個(gè)問(wèn)到比較多的問(wèn)題吧!下面是小編整理的相關(guān)內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助!

我們要繪制一張圖片,內(nèi)容包括一張背景圖和一個(gè)動(dòng)態(tài)生成的二維碼,前提是背景圖是項(xiàng)目本身的靜態(tài)資源,二維碼是服務(wù)端動(dòng)態(tài)生成的,二者不在同一域名下。

解決辦法:把所有圖片都重定向同一個(gè)域名下:

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)
}

講解完 :“html5中不同圖片資源跨域畫(huà)布污染怎么解決?canvas畫(huà)布解決方法分享! ”這個(gè)問(wèn)題的相關(guān)內(nèi)容相信很多小伙伴們應(yīng)該都有所了解,更多有關(guān)于html5這個(gè)方面的相關(guān)內(nèi)容我們都可以在W3Cschool中進(jìn)行學(xué)習(xí)! 


0 人點(diǎn)贊