如何使用JavaScript/HTML5获取图像矩阵2D

Question

有没有使用html5/js例子将任何图像转换为2d矩阵的解决方案

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

Answer 1

正如其他人所说,你可以使用canvas元素来做到这一点.我发布了一个JSFiddle,除了这个技术只适用于与页面在同一个域上托管的图像(除非图像是跨源启用的)...并且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标记.