如何使用Javascript将彩色图像转换为黑/白？

Question

如何仅使用Javascript将彩色图像转换为黑/白？

AND,也使它在大多数浏览器中交叉兼容,因为我听说Internet Explorer有一个"过滤器"机制,但没有其他浏览器支持它.

Answer 1

尽管我最初持怀疑态度,但在某些浏览器中使用新的Canvas功能似乎确实可以实现这种魔力.

此页面显示了如何使用支持Canvas的浏览器执行此操作:

http://www.permadi.com/tutorial/jsCanvasGrayscale/index.html

对于IE,你需要使用过滤器,这里有一个做灰度的例子:

http://www.javascriptkit.com/filters/basicimage.shtml

Answer 2

我这样做的方法是将img的src设置为指向服务器端的PHP脚本

例如.,

<img src="http://mysite/grayscale.php?url='...'

该脚本获取图像,运行一些GD代码,并返回JPG.像这样的东西

Answer 3

这个jquery插件似乎可以跨浏览器工作.虽然我没有经过测试.

https://github.com/GianlucaGuarini/jQuery.BlackAndWhite

Answer 4

使用 HTML5 Canvas 和 JavaScript

 ctx.drawImage(img, 0, 0, w, h);

    var imgPixels = ctx.getImageData(0, 0, w, h);
    for(var y = 0; y < imgPixels.height; y++){
     for(var x = 0; x < imgPixels.width; x++){
          var i = (y * 4) * imgPixels.width + x * 4;
          var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
          imgPixels.data[i] = avg;
          imgPixels.data[i + 1] = avg;
          imgPixels.data[i + 2] = avg;
     }
}
ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);

Answer 5

现代浏览器现在可以在任何HTML 元素上的 CSS \xe2\x80\x93 中执行此操作，而不仅仅是图像。结合IE旧的filterCSS，可以获得相当好的兼容性：

\n\n

image.grayscale {\n  /* IE */\n  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);\n\n  /* Chrome, Safari */\n  -webkit-filter: grayscale(1);\n\n  /* Firefox */\n  filter: grayscale(1);\n}\n

\n\n

OP 指定“仅 JavaScript”，但也提到如果 IEfilter能得到更广泛的支持，那么它是可以接受的，现在（实际上）是这样，所以我相信这是 2015 年最好的解决方案。如果你真的必须有 JavaScript：

\n\n

element.style.filter = \'grayscale(1)\';\n

\n\n

资料来源：

\n\n

\n
• 浏览器支持
\n
• 规格
\n
• 教程
\n

\n