在JavaScript中访问图像像素以进行图像处理的最佳方法？

我正在尝试使用javascript对图像执行简单的操作。为了获得图像的像素，我在画布上绘制图像，然后从画布上获取ImageData。但是对于大型图像，在画布上绘制它们需要很多时间

---

有没有其他不使用canvas元素获取图像像素的方法？

我对Javascript没有太多经验，但是Max Novakovic（@betamax）编写了一个名为$.getImageData的很好的jQuery插件

您可以在和上阅读有关$的更多信息

您应该能够通过类似于

context.getImageData（x，y，width，height）.data的内容访问像素

此外，您还提到了硬件加速，这应该在Firefox4和Chrome中提供。在浏览器中使用GLSL着色器：

我不认为您可以在JavaScript中通过硬件加速进行图像处理，因此无论是画布还是其他技术，您都不会在JavaScript环境中获得太多边际收益

如果你想让你的代码被硬件加速，你的代码必须被编译成可以在GPU中运行并且可以访问图形内存的东西。Flash和Silverlight的方法是引入像AGAL和HLSL这样的着色语言。也许JavaScript将来会有类似的东西

因此，我的建议是使用以下方法进行图像处理：

服务器端技术
闪光和银色灯光，带阴影语言
我不确定，但是否可以将图像数据写入字符串，并对字符串进行操作，然后在显示结果图像之前将其转换回图像

这不需要从绘图到画布，只需将图像数据作为字符串而不是图像加载。然而，这将涉及到一些复杂且可能很难获得正确的字符串操作，以确保正确翻译图像数据，更重要的是操作像素

这也意味着对于较大的图像，字符串可能非常长，因此这可能需要比canvas更多的内存，并且可能需要拆分为多个字符串。作为交换，它可能比绘制到画布要快，尤其是当您只需要操纵图像的一部分时，使用多个字符串

我对图像处理没有经验，但理论上没有理由不能将文件的数据写入字符串。它只是，再一次，将产生一个很长的字符串，并且可能会产生RAM影响，因为该字符串可能会占用比图像文件本身更多的RAM。但它的加载速度会更快，因为它不必像绘制画布那样处理数据。
下面的示例使用。它获取分辨率为2800x2053的彩色图像，遍历每个像素，计算灰度值并将其设置回原值。画布上方有一个用于打印处理时间的div。在我的机器上，包括图像加载在内，花费了115ms


var time=newdate（）.getTime（）；
var canvas=document.getElementById（“canvas”）；
image=新的MarvinImage（）；
image.load（“https://i.imgur.com/iuGXHFj.jpg“，图像加载）；
函数imageLoaded（）{
对于（var y=0；是否真的那么慢？如果不将图像绘制到屏幕上，可能会更快，但仅绘制到画布上。我将图像绘制到画布上，而不是屏幕上。但它仍然比大多数图像编辑工具慢得多。大多数图像编辑工具都是硬件加速的；还不是所有浏览器都支持画布的硬件加速。但是你在用什么浏览器进行测试？会有帮助吗？@Harmen，我正在用Firefox和Chrome进行测试。如上所述，从我读到的关于插件的内容来看，它有助于获取给定url的图像对象。我们仍然需要通过在画布上绘制图像来获取像素。谢谢提醒。WebGL无法进行像素操作，对吗o像素级JavaScript似乎仍然无法编译为GPU加速代码。需要时间的是获取图像数据。此操作后，您将启动计时器。对于灰度之类的东西，您可以通过globalCompositeOperations实现同样的速度：我更改了答案。计时器在第一行启动。