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

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

---

此外，还要使它在大多数浏览器中实现交叉兼容，因为我听说Internet Explorer有一个“过滤”机制，但没有其他浏览器支持它。

尽管我最初对此表示怀疑，但在某些浏览器中使用新的画布功能，似乎确实可以实现这种魔力

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

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

---

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

例如

该脚本获取图像，运行一些GD代码，并返回一个JPG。Canvas确实是解决这个问题的最佳客户端解决方案，我只想指出，对于IE，您实际上可以使用google exCanvas项目，该项目将Canvas命令转换为专有的基于Microsoft XML的向量语言VML

我发现这个（）解决方案在IE之外运行得相当好，正如其他人所指出的那样，你需要使用过滤器来实现它。
这个jquery插件似乎可以跨浏览器工作。不过我还没有仔细测试过

现代浏览器现在可以在CSS中实现这一点–在任何HTML元素上，而不仅仅是图像上。结合IE的旧
过滤器
CSS，您可以获得非常好的兼容性：

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

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

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

OP指定了“仅JavaScript”，但也提到如果IE的
过滤器得到更广泛的支持，它将是可以接受的，而现在（实际上）是这样，因此我相信这是2015年的最佳解决方案。如果您确实必须拥有JavaScript：

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

资料来源：





使用HTML5画布和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);

ctx.drawImage（img，0，0，w，h）；
var imgPixels=ctx.getImageData（0,0,w,h）；
对于（变量y=0；y
一些图像过滤器在CSS中可用，并且受到所有主流浏览器的支持，但是使用HTML5画布和Javascript可以有更多的选项

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

示例：






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

加载图像：

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

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

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

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

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

灰度：

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

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

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

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

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


黑白：

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

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

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

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

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


黑白2:

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

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

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

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

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


半色调：

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

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

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

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

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


可运行示例：

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

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

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

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

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


var canvas=document.getElementById（“canvas”）；
image=新的MarvinImage（）；
image.load（“https://i.imgur.com/B33rKWi.png“，图像加载）；
函数imageLoaded（）{
//灰度
//灰度（image.clone（），image）；
//图像绘制（画布）；
//黑白
Marvin.blackAndWhite（image.clone（），image，5）；
图像绘制（画布）；
//黑白2
//Marvin.blackAndWhite（image.clone（），image，40）；
//图像绘制（画布）；
//误差扩散
//半色调扩散（image.clone（），image）；
//图像绘制（画布）；
}


我认为这段代码将运行完美，您不需要嵌套循环或任何附加库

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（图像，0,0）；
var imageData=ctx.getImageData（0,0，image.width，image.height）；
对于（var i=0；i现在，您还可以在将图像渲染到画布之前应用

我认为这比使用JS更合适。我印象深刻，而且我认为这是最接近纯客户端解决方案的解决方案。不幸的是，permadi.com脚本不适用于跨域图像（至少在Chrome 12上），请参见