如何使用JavaScript/HTML5获取2D图像矩阵 [英] How to get image matrix 2D using JavaScript / HTML5

问题描述

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

are there any solution of converting any image to the 2d matrix using html5/js example

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

推荐答案

正如其他人所指出的，您可以使用canvas元素来完成此操作.我将发布一个JSFiddle，除非该技术仅适用于与页面位于同一域中的图像(除非图像为

As others have noted, you can do this using a canvas element. I'd post a JSFiddle except this technique only works for images hosted on the same domain as the page (unless the image is cross-origin enabled)... and JSFiddle doesn't seem to host any suitable images to use in an example. So here's the code I used to test this:

// 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标签.

Read up on canvas pixel manipulation for details. You might also want to verify the canvas tag is supported on browsers you care about.

这篇关于如何使用JavaScript/HTML5获取2D图像矩阵的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！