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

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

共 5 个回答
高赞
时间
活跃
0

0

尽管我最初对此表示怀疑,但似乎可以通过在某些浏览器中使用新的Canvas功能来实现这种神奇效果。
此页面显示了如何使用支持Canvas的浏览器执行此操作:
http://www.permadi.com/tutorial/jsCanvasGrayscale/index.html
对于IE,您需要使用过滤器,这里有一个执行灰度的示例:
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)';
资料来源:
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);
0

我要做的方法是将img的src设置为指向服务器端PHP脚本
例如。,
<img src="http://mysite/grayscale.php?url='...'
该脚本获取图像,运行一些GD代码,然后返回JPG。 像这样
新手导航
- 社区规范
- 提出问题
- 进行投票
- 个人资料
- 优化问题
- 回答问题
0
如何仅使用Javascript将彩色图像转换为黑白图像?
而且,还可以使其在大多数浏览器中相互兼容,因为我听说Internet Explorer具有“过滤器”机制,但是没有其他浏览器支持它。