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


0 Answers

正如已經暗示的那樣,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數組提供可能會更容易。

Question

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

如果有,怎麼樣?






Related