html5 getimagedata - JavaScript:在沒有畫布的情況下獲取ImageData




context canvas (3)

你必須創建一個內存畫布,然後在這個畫布上繪製圖像:

var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
var img = document.getElementById('myimg');
canvas.width = img.width;
canvas.height = img.height;
context.drawImage(img, 0, 0 );
var myData = context.getImageData(0, 0, img.width, img.height);

但是,如果圖像來自另一個域,則無法使用。 這是一個安全限制,如果您無法控制服務器,則無法解決(請注意,如果您使用file打開html文件://您將有很多其他限制,請使用http://)

是否有可能從不在畫布上的圖像中獲取ImageData對象,而在DOM樹中的其他位置作為普通的<img>

如果有,怎麼樣?


正如已經暗示的那樣,canvas提供了創建ImageData對象的唯一解決方案。

如果你真的設置不使用canvas元素來加載圖像數據(也許我們正在談論IE8),你總是可以考慮使用圖像對象的src位置解析base64圖像數據

http://blog.calyptus.eu/seb/2009/05/png-parser-in-javascript/

這很困難,但如果必須,可能會以這種方式將圖像解析為數組。

https://github.com/devongovett/png.js/blob/master/png.js

這將向您展示如何使用xhr請求加載數據並解析png數據。 在內部,它使用畫布進行其他一些操作,但您感興趣的子集是無畫布的。 您需要對您感興趣的每種圖像格式執行類似的實現。

我應該提到圖像像素讀取限制在安全性方面是相同的。 無論是否有畫布,您都無法讀取來自第三方的像素。 XMLHTTPRequest將受到跨域策略治理的約束。 這可以防止腳本竊取第三方內容,其中包括可能包含敏感用戶信息的圖像。

如果您需要在第三方域上讀取圖像(不需要身份驗證才能查看),您應該在域上運行圖像代理服務器,以允許您在同一域上請求圖像。 如果你需要解決這個問題,那麼首先簡單地將圖像數據作為json數組提供可能會更容易。


閉包很難解釋,因為它們被用來使某些行為工作,每個人都直觀地期望工作。 我發現解釋它們的最佳方式(以及學習它們的方式)是想像沒有它們的情況:

    var bind = function(x) {
        return function(y) { return x + y; };
    }
    
    var plus5 = bind(5);
    console.log(plus5(3));

如果JavaScript 知道閉包會發生什麼? 只需用它的方法體替換最後一行中的調用(基本上是函數調用的函數),你得到:

console.log(x + 3);

現在, x的定義在哪裡? 我們沒有在當前範圍內定義它。 唯一的解決方案是讓plus5 攜帶其範圍(或者更確切地說,其父節點的範圍)。 這樣, x是明確定義的,它綁定到值5。





javascript html5 canvas