在Javascript中将图像转换为RGB阵列 [英] Convert an image to an RGB array in Javascript
问题描述
可以从Javascript中的PNG或BMP图片获取像素数组吗?我想从图像中获取一个RGB数组,这样我可以操作像素数组,然后在画布上绘制修改的图像。
Is it possible to get an array of pixels from a PNG or BMP image in Javascript? I'd like to obtain an RGB array from an image so that I can manipulate the array of pixels, and then draw the modified image on a canvas.
UPDATE:我在这里发现了一个完全重复的:如何使用javascript获取页面中图片的RGB值?
UPDATE: I found an exact duplicate here: how to get the RGB value of an image in a page using javascript?
但是,答案不会
推荐答案
在网上有关于使用HTML Canvas的一百个教程
There are a hundred tutorials on the net about using HTML Canvas imageData, which gets the RGBA values of an canvas. Do a search for canvas imageData and you'll find plenty of info.
所有你需要做的是:
ctx.drawImage(img, 0, 0);
var imgData = ctx.getImageData(x, y, width, height).data;
imgData现在是一个数组,其中每4个位置是每个像素。所以 [0] [1] [2] [3] 是
[r] [g] [b] [a]
的第一个像素。
imgData is now an array where every 4 places are each pixel. So [0][1][2][3]
are the [r][g][b][a]
of the first pixel.
这篇关于在Javascript中将图像转换为RGB阵列的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!