Question

有没有办法转换图像，使其显示为灰度。更改rgb无法按要求运行。

Answer 1

如果您能够使用HTML5，则可以使用画布，如here所示。

Answer 2

谷歌对于“画布灰度图像”的第一个链接将是：

HTML 5引入了Canvas对象，可用于绘制和操作图像。在这个例子中，我使用Canvas将图像转换为灰度。如果您的浏览器支持Canvas，您应该看到上面的两个图像：普通图像和灰度图像。灰度级不是单独的图像，而是通过使用Canvas生成的。

http://permadi.com/tutorial/jsCanvasGrayscale/index.html

Answer 3

如果您希望使用HTML在客户端（在浏览器上）完成此操作，则需要使用Canvas。示例：http://www.youtube.com/watch?v=QJa7tWScXS4

Answer 4

使用PaintbrushJS：

http://mezzoblue.github.com/PaintbrushJS/demo/

它允许您应用任意数量的过滤器，包括灰度，并适用于大多数现代浏览器。这不是一个“HTML”解决方案，没有两个图像就不可能。

至少它适用于大多数浏览器，包括那些尚不支持HTML5的浏览器。

Answer 5

您可能知道，屏幕颜色由3个组成部分组成：红色，绿色和蓝色。每个组件或颜色（例如，红色）的值都是0到255.值0表示没有红色，值255表示最亮的红色。要将颜色转换为灰度，您只需计算所有三个组件的平均值。这可以使用下面的简单公式来完成：

grayscalecolor =（红色+绿色+蓝色）/ 3;

画布方法

var canvas = document.createElement('canvas');

var canvasContext = canvas.getContext('2d');

var imgW = imgObj.width;

var imgH = imgObj.height;
canvas.width = imgW;
canvas.height = imgH;
canvasContext.drawImage(imgObj, 0, 0);

var imgPixels = canvasContext.getImageData(0, 0, imgW, imgH);

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;
     }
}
canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);

return canvas.toDataURL();

Microsoft Internet Explorer不支持CANVAS标记，但Microsoft确实通过过滤器提供图像处理。用于将图像转换为灰度的过滤器是名为DXImageTransform.Microsoft.BasicImage的过滤器。

imgObj.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayScale=1)';

在html中制作黑白图像/灰度图像

5 个答案: