如何使用JavaScript/HTML5

Question

是否有使用HTML5/JS 例如任何圖像轉換爲二維矩陣

picture.jpg -------be Converted to -----> matrice[W][H] of pixels 

Answer 1

不幸的原因，是難以解釋的Javascript代碼的任何解決方案沒有得到圖像矩陣二維允許讀取圖像的像素，除非圖像來自已從其下載Javascript的相同服務器。

即使圖像是公開的，整個互聯網都可以在不提供憑據的情況下下載它...整個世界都可以，但是由於安全原因（！）您的頁面無法訪問。避免這種限制的一個技巧是編寫一個服務器端部分，代表您的圖像。

如果圖像是允許您閱讀的圖像，那麼您可以創建一個畫布，在其上繪製圖像，然後讀取像素。

var c = document.createElement("canvas"); 
c.width = img.width; 
c.height = img.height; 
var ctx = c.getContext("2d"); 
ctx.drawImage(img, 0, 0); 
var idata = c.getImageData(0, 0, img.width, img.height); 
// 
// here idata.data[(y*img.width + x)*4] is the red value 
// of pixel (x, y), followed by green, blue and alpha 
// 

Answer 2

正如其他人所指出的，您可以使用畫布元素來完成此操作。我會發佈一個JSFiddle，除了這種技術只適用於與頁面託管在同一個域中的圖像（除非圖像是cross-origin enabled）...並且JSFiddle似乎沒有託管任何合適的圖像供示例使用。所以這是我用來測試的代碼：

// Get a reference to the image you want the pixels of and its dimensions 
var myImage = document.getElementById('theImageToWorkWith'); 
var w = myImage.width, h = myImage.height; 

// Create a Canvas element 
var canvas = document.createElement('canvas'); 

// Size the canvas to the element 
canvas.width = w; 
canvas.height = h; 

// Draw image onto the canvas 
var ctx = canvas.getContext('2d'); 
ctx.drawImage(myImage, 0, 0); 

// Finally, get the image data 
// ('data' is an array of RGBA pixel values for each pixel) 
var data = ctx.getImageData(0, 0, w, h); 

詳細瞭解canvas pixel manipulation。 您可能還想驗證您關心的瀏覽器上的canvas tag is supported。