如何使用Javascript将彩色图像转换为黑白图像?
image-processing
javascript
6
0

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

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

参考资料:
Stack Overflow
收藏
评论
共 5 个回答
高赞 时间 活跃

这个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。 像这样

收藏
评论
新手导航
  • 社区规范
  • 提出问题
  • 进行投票
  • 个人资料
  • 优化问题
  • 回答问题

关于我们

常见问题

内容许可

联系我们

@2020 AskGo
京ICP备20001863号