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

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

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

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

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

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

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

现代浏览器现在可以在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)';

资料来源：

• 浏览器支持
• 规格
• 讲解

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

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

例如。，

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

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