Question

0

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

而且，还可以使其在大多数浏览器中相互兼容，因为我听说Internet Explorer具有“过滤器”机制，但是没有其他浏览器支持它。

参考资料：

Stack Overflow

Answer 1

0

这个jQuery插件似乎可以跨浏览器工作。我还没有进行彻底的测试。

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

NaN-aN-aN aN:aN:aN 更新

Ryan Eveline• 703

0

尽管我最初对此表示怀疑，但似乎可以通过在某些浏览器中使用新的Canvas功能来实现这种神奇效果。

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

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

对于IE，您需要使用过滤器，这里有一个执行灰度的示例：

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

NaN-aN-aN aN:aN:aN 更新

Bernie Saul• 639

0

现代浏览器现在可以在CSS中-在任何 HTML元素上执行此操作，而不仅仅是图像。结合IE的旧filter CSS，您可以获得很好的兼容性：

image.grayscale {
  /* IE */
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);

  /* Chrome, Safari */
  -webkit-filter: grayscale(1);

  /* Firefox */
  filter: grayscale(1);
}

OP指定“仅JavaScript”，但也提到了IE的filter如果现在得到更广泛的支持）是可以接受的（现在有效），因此，我认为这是2015年的最佳解决方案。如果您确实必须使用JavaScript：

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

资料来源：

NaN-aN-aN aN:aN:aN 更新

Carl Agnes• 706

0

使用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);

NaN-aN-aN aN:aN:aN 更新

东方鹏天• 688

0

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

例如。，

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

该脚本获取图像，运行一些GD代码，然后返回JPG。像这样

NaN-aN-aN aN:aN:aN 更新

笪高达• 676