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

标签 javascript html matrix image

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

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

最佳答案

正如其他人所指出的,您可以使用 Canvas 元素来执行此操作。我会发布一个 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在您关心的浏览器上。

关于javascript - 如何使用 JavaScript/HTML5 获取图像矩阵 2D,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14910520/

相关文章:

MATLAB 根据第 1 列条件维护 2 列

python - 马尔可夫转移概率矩阵在Python中的实现

javascript - 无法通过 Websocket 连接到 Mosquitto

javascript - 在 Canvas 上旋转 'note' 始终触摸左上角

jquery - 如何使用 Jquery 导入 Canvas.js?

c++ - "basic"类的运算符重载

javascript - 你为什么要用!!在这种情况下的表达? angularjs api

javascript - 从HTML模板制作Wordpress主题时,JS不起作用

javascript - 将href网址更改为父级li菜单中的#标签

javascript - 将特定客户端逻辑应用于一组相关元素的最佳方法