如何仅使用 Javascript 将彩色图像转换为黑白？
并且，还要使它在大多数浏览器中交叉兼容，因为我听说 Internet Explorer 有一个“过滤器”机制，但没有其他浏览器支持它。
Aaron8it
问问题
51412 次
10 回答
16
尽管我最初持怀疑态度，但在某些浏览器中使用新的 Canvas 功能，这种魔法似乎确实是可能的。
这个页面展示了如何使用支持 Canvas 的浏览器来做到这一点：
http://www.permadi.com/tutorial/jsCanvasGrayscale/index.html
对于 IE 你需要使用过滤器，这里有一个做灰度的例子：
于 2009-02-18T17:54:01.330 回答
8
我这样做的方法是将 img 的 src 设置为指向服务器端 PHP 脚本
例如。，
<img src="http://mysite/grayscale.php?url='...'
该脚本获取图像，运行一些 GD 代码，并返回 JPG。像这样的东西
于 2009-02-18T18:11:00.370 回答
8
这个 jquery 插件似乎可以跨浏览器工作。不过，我还没有彻底测试过。
于 2012-02-14T17:01:36.983 回答
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);
于 2016-02-03T14:53:32.307 回答
4
我认为这段代码可以完美运行，无需嵌套循环或任何其他库
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);
于 2018-05-04T12:17:40.703 回答
3
现代浏览器现在可以在 CSS 中做到这一点——在任何HTML 元素上，而不仅仅是图像。结合 IE 的老filterCSS，可以得到相当不错的兼容性：
image.grayscale {
/* IE */
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
/* Chrome, Safari */
-webkit-filter: grayscale(1);
/* Firefox */
filter: grayscale(1);
}
OP 指定“仅 JavaScript”，但也提到如果 IEfilter得到更广泛的支持，现在（实际上）是可以接受的，所以我相信这是 2015 年最好的解决方案。如果你真的必须有 JavaScript：
element.style.filter = 'grayscale(1)';
资料来源：
于 2015-05-15T01:48:48.330 回答
1
我发现这个（http://spyrestudios.com/html5-canvas-image-effects-black-white/）解决方案在 IE 之外工作得相当好，正如其他人所指出的那样，您需要使用过滤器为了。
于 2011-09-07T20:49:07.113 回答
1
一些图像过滤器在 CSS 中可用，并受到所有主要浏览器的支持，但您可以使用 HTML5 Canvas 和 Javascript 获得更多选项。
但是，当使用基于 Canvas 的图像过滤时，您不需要自己实现过滤器算法。只需使用图像处理或 Canvas 操作库。
例子：
在下面的示例中，我使用了 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>于 2017-12-12T11:14:18.630 回答
1
如今，您还可以在将图像渲染到画布之前应用过滤器。浏览器支持数据在这里。
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);
于 2021-03-03T21:33:42.377 回答
0
Canvas 确实是解决这个问题的最佳客户端解决方案，我只想指出，对于 IE，您实际上可以使用 google exCanvas 项目，该项目将 canvas 命令转换为专有的 Microsoft 基于 XML 的矢量语言 VML。
于 2009-03-10T19:17:08.080 回答