let _img = new Image(),
                    _canvas = window.document.createElement("canvas"),
                    _context = _canvas.getContext("2d");
            _img.onload = function () {
                let originWidth = _img.width,
                    originHeight = _img.height;
                _canvas.width = originWidth;
                _canvas.height = originHeight;
                _context.clearRect(0, 0, originWidth, originHeight);
                _context.drawImage(_img, 0, 0);
                let imageData = _context.getImageData(0, 0, originWidth, originHeight).data;
                // 檢測是否是透明圖片 Uint8ClampedArray 描述了一個一維陣列，包含以 RGBA 順序的資料，資料使用  0 至 255（包含）的整數表示。
                isTransparent = true;
                for (let index = 3; index < imageData.length; index += 4) {
                    if (imageData[index] !== 0) {
                        isTransparent = false;
                        break;
                    }
                }
               
            };
            _img.onerror = function () {
       
            };
            _img.url = _url;
 

注意：

HTML 規範文件為 images 引入了 crossorigin屬性, 通過設定適當的頭資訊 CORS, 可以從其他站點載入 img圖片, 並用在 canvas 中,就像從當前站點(current origin)直接下載的一樣.

crossorigin屬性的使用細節, 請參考 CORS settings attributes.

什麼是 “被汙染的(tainted)” canvas?

儘管沒有CORS授權也可以在 canvas 中使用影象, 但這樣做就會汙染(taints)畫布。 只要 canvas 被汙染, 就不能再從畫布中提取資料, 也就是說不能再呼叫 toBlob()

這實際上是為了保護使用者的個人資訊,避免未經許可就從遠端web站點載入使用者的影象資訊,造成隱私洩漏。

(譯者注: 如果使用者登陸過QQ等社交網站, 假若不做保護,則可能開啟某個網站後,該網站利用 canvas 將使用者的圖片資訊獲取,上傳,進而引發洩露.)

示例: 從其他站點儲存圖片

首先, 圖片伺服器必須設定相應的 Access-Control-Allow-Origin響應頭。新增 img 元素的 crossOrigin 屬性來請求頭。比如Apache伺服器,可以拷貝 

<IfModule mod_setenvif.c>
    <IfModule mod_headers.c>
    <FilesMatch "\.(cur|gif|ico|jpe?g|png|svgz?|webp)$">
        SetEnvIf Origin ":" IS_CORS
        Header set Access-Control-Allow-Origin "*" env=IS_CORS
    </FilesMatch>
    </IfModule>
</IfModule> 

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

這些設定生效之後, 就可以像本站的資源一樣, 儲存其他站點的圖片到 DOM儲存之中(或者其他地方)。

var img = new Image,
    canvas = document.createElement("canvas"),
    ctx = canvas.getContext("2d"),
    src = "http://example.com/image"; // 具體的圖片地址

img.crossOrigin = "Anonymous";

img.onload = function() {
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage( img, 0, 0 );
    localStorage.setItem( "savedImageData", canvas.toDataURL("image/png") );
}
img.src = src;
//  確保快取的圖片也觸發 load 事件
if ( img.complete || img.complete === undefined ) {
    img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
    img.src = src;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19

瀏覽器相容性

Desktop

Mobile

--------------------- 本文來自 鐵錨 的CSDN 部落格 ，全文地址請點選：https://blog.csdn.net/renfufei/article/details/51675148?utm_source=copy 

參考連結：

https://developer.mozilla.org/zh-CN/docs/Web/API/ImageData

https://www.zhangxinxu.com/wordpress/2018/05/canvas-png-transparent-background-detect/

https://www.zhangxinxu.com/wordpress/2017/12/canvas-getimagedata-letter-shape-animation/

https://blog.csdn.net/renfufei/article/details/51675148