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

Question

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

并且，还要让它在大多数浏览器中交叉兼容，因为我听说 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。某事like this

Answer 3

Canvas 确实是解决这个问题的最佳客户端解决方案，我只想指出，对于 IE，您实际上可以使用 google exCanvas 项目，该项目将 canvas 命令转换为专有的 Microsoft 基于 XML 的矢量语言， VML。

http://excanvas.sourceforge.net/

Answer 4

我发现这个 (http://spyrestudios.com/html5-canvas-image-effects-black-white/) 解决方案在 IE 之外运行良好，正如其他人所指出的，您需要使用过滤器。

Answer 5

这个 jquery 插件似乎可以跨浏览器工作。不过我还没有彻底测试过。

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

Answer 6

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

来源：

• Browser support
• Spec
• Tutorial

Answer 7

使用 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 8

一些图像过滤器在 CSS 中可用，并受到所有主要浏览器的支持，但您可以使用 HTML5 Canvas 和 Javascript 获得更多选项。

但是，当使用基于 Canvas 的图像过滤时，您不需要自己实现过滤器算法。只需使用图像处理或 Canvas 操作库。

例子：

• fabric.js
• processing.js
• MarvinJ

在下面的示例中，我使用了 MarvinJ。

加载图片：

image = new MarvinImage();
image.load("https://i.imgur.com/B33rKWi.png", imageLoaded);

灰度：

Marvin.grayScale(image.clone(), image);

黑白：

Marvin.blackAndWhite(image.clone(), image, 5);

黑白2：

Marvin.blackAndWhite(image.clone(), image, 40);

半色调：

Marvin.halftoneErrorDiffusion(image.clone(), image);

可运行示例：

var canvas = document.getElementById("canvas");
image = new MarvinImage();
image.load("https://i.imgur.com/B33rKWi.png", imageLoaded);

function imageLoaded(){
	// GrayScale
	//Marvin.grayScale(image.clone(), image);
	//image.draw(canvas);
	
	// Black and White
	Marvin.blackAndWhite(image.clone(), image, 5);
	image.draw(canvas);
	
	// Black and White 2
	//Marvin.blackAndWhite(image.clone(), image, 40);
	//image.draw(canvas);
	
	// Error Diffusion
	//Marvin.halftoneErrorDiffusion(image.clone(), image);
	//image.draw(canvas);
}

<script src="https://www.marvinj.org/releases/marvinj-0.7.js"></script>
<canvas id="canvas" width="400" height="400"></canvas>

Answer 9

我认为这段代码可以完美运行，无需嵌套循环或任何其他库

var image = document.getElementById("image");

var canvas=document.createElement("canvas");
var ctx=canvas.getContext("2d");

canvas.width= image.width;
canvas.height= image.height;

ctx.drawImage(image,0,0);

var imageData=ctx.getImageData(0,0, image.width, image.height);

for (var i=0;i<imageData.data.length;i+=4) {
    var avg = (imageData.data[i]+imageData.data[i+1]+imageData.data[i+2])/3;

    imageData.data[i] = avg;
    imageData.data[i+1] = avg;
    imageData.data[i+2] = avg;

}

ctx.putImageData(imageData, 0, 0, 0, 0, imageData.width, imageData.height);
document.getElementById("grayscale").appendChild(canvas);

Answer 10

现在您还可以在将图像渲染到画布之前应用filter。 Browser support data here.

const image = document.getElementById("image");
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
canvas.width = image.width;
canvas.height = image.height;
ctx.filter = "grayscale()";
ctx.drawImage(image, 0, 0);