canvas因為圖片資源不在同一域名下而導致的跨域污染畫布的解決辦法

chemzqm 發布于2019-08-23 14:48 / 1963人閱讀

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

我們要繪制一張圖片，內容包括一張背景圖和一個動態生成的二維碼，前提是背景圖是項目本身的靜態資源，二維碼是服務端動態生成的，二者不在同一域名下。

解決辦法：把所有圖片都重定向同一個域名下：

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

云服務器 GPU云服務器跨域解決辦法的解決辦法微軟的解決辦法 use的解決辦法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/101158.html

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

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

Charles 2019-08-22 15:01 評論0 收藏0
前端跨域分析及解決辦法

摘要：為什么有跨域問題因為瀏覽器的同源策略，導致了跨域問題的出現。一同源策略什么是同源策略同源策略限制了從同一個源加載的文檔或腳本如何與來自另一個源的資源進行交互。為什么需要同源策略出于安全原因，瀏覽器限制從腳本內發起的跨源請求。為什么有跨域問題因為瀏覽器的同源策略，導致了跨域問題的出現。一. 同源策略 1. 什么是同源策略同源策略限制了從同一個源加載的文檔或腳本如何與來自另一個源的...

includecmath 2019-08-26 14:04 評論0 收藏0
網頁保存為圖片及高清截圖的優化 | canvas跨域圖片配置

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

zhaochunqi 2019-08-01 17:43 評論0 收藏0