国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

canvas因?yàn)閳D片資源不在同一域名下而導(dǎo)致的跨域污染畫布的解決辦法

chemzqm / 1957人閱讀

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

我們要繪制一張圖片，內(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)
}

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/101158.html

相關(guān)文章

  • JavaScript中的圖片處理與合成(一)

    摘要：中的圖片處理與合成一引言圖片處理現(xiàn)在已經(jīng)成為了我們生活中的剛需，想必大家也經(jīng)常有這方面的需求。實(shí)際前端業(yè)務(wù)中，也經(jīng)常會(huì)有很多的項(xiàng)目需要用到圖片加工和處理。 JavaScript中的圖片處理與合成(一) 引言： 圖片處理現(xiàn)在已經(jīng)成為了我們生活中的剛需，想必大家也經(jīng)常有這方面的需求。實(shí)際前端業(yè)務(wù)中，也經(jīng)常會(huì)有很多的項(xiàng)目需要用到圖片加工和處理。由于過去一段時(shí)間公司的業(yè)務(wù)需求，讓我在這方面積累...

    Charles 評(píng)論0 收藏0

  • 前端跨域分析及解決辦法

    摘要：為什么有跨域問題因?yàn)闉g覽器的同源策略，導(dǎo)致了跨域問題的出現(xiàn)。一同源策略什么是同源策略同源策略限制了從同一個(gè)源加載的文檔或腳本如何與來自另一個(gè)源的資源進(jìn)行交互。為什么需要同源策略出于安全原因，瀏覽器限制從腳本內(nèi)發(fā)起的跨源請(qǐng)求。 為什么有跨域問題 因?yàn)闉g覽器的同源策略，導(dǎo)致了跨域問題的出現(xiàn)。 一. 同源策略 1. 什么是同源策略 同源策略限制了從同一個(gè)源加載的文檔或腳本如何與來自另一個(gè)源的...

    includecmath 評(píng)論0 收藏0

  • 網(wǎng)頁保存為圖片及高清截圖的優(yōu)化 | canvas跨域圖片配置

    摘要：本次技術(shù)調(diào)研來源于項(xiàng)目中的一個(gè)重要功能需求實(shí)現(xiàn)微信長(zhǎng)按網(wǎng)頁保存為截圖。以下主要解決兩類跨域的圖片資源包括已配置過的中的圖片資源和微信用戶頭像圖片資源。 本次技術(shù)調(diào)研來源于H5項(xiàng)目中的一個(gè)重要功能需求：實(shí)現(xiàn)微信長(zhǎng)按網(wǎng)頁保存為截圖。 這里有個(gè)栗子（請(qǐng)用微信打開，長(zhǎng)按圖片即可保存）：3分鐘探索你的知識(shí)邊界 將整個(gè)網(wǎng)頁保存為圖片是一個(gè)十分有趣的功能，常見于H5活動(dòng)頁的結(jié)尾頁分享。以下則是項(xiàng)目中...

    zhaochunqi 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<