📜  制作img黑白css(1)

📅  最后修改于: 2023-12-03 15:07:16.724000             🧑  作者: Mango

制作img黑白css

在网页设计中,经常需要将一张彩色的图片转换成黑白图片。这篇文章将介绍如何通过CSS实现这个效果。

1. 使用CSS3的filter属性

CSS3新增了一些滤镜属性,其中filter属性可以处理图片的颜色,可以通过设置filter属性的值来将图片转换成黑白图片。

img {
  filter: grayscale(100%);
}

上面的代码将img元素的颜色处理为灰度,值为100%时表示完全的黑白图片。

注:这个方法虽然简单,但是需要浏览器支持CSS3的filter属性。

2. 使用SVG

可以通过SVG的feColorMatrix过滤器,将图片转换成黑白图片。下面是一个使用SVG的例子。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="0" height="0">
  <filter id="grayscale">
    <feColorMatrix type="matrix"
      values="0.33 0.33 0.33 0 0
              0.33 0.33 0.33 0 0
              0.33 0.33 0.33 0 0
              0    0    0    1 0" />
  </filter>
</svg>

这个SVG定义了一个id为grayscale的过滤器,使用feColorMatrix实现灰度转换。接下来,将过滤器应用到img元素。

img {
  filter: url(#grayscale);
}

可以看到,使用SVG对图片进行处理比较麻烦,需要定义过滤器并将其应用到img元素。

注:这个方法比起第一种方法可以兼容更多的浏览器,但是代码较为冗长。

3. 使用canvas

在JavaScript中,可以使用HTML5新增的canvas元素,将图片转换成黑白图片。

<img id="image" src="path/to/image.png">
<canvas id="canvas"></canvas>

在JavaScript中,获取img元素和canvas元素,并将img元素绘制到canvas元素上,并将图像转换成灰度。

var img = document.getElementById('image');
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

canvas.width = img.width;
canvas.height = img.height;

ctx.drawImage(img, 0, 0);

var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
var pixels = imgData.data;

for (var i = 0; i < pixels.length; i += 4) {
  var r = pixels[i];
  var g = pixels[i + 1];
  var b = pixels[i + 2];
  var gray = (r + g + b) / 3;
  pixels[i] = gray;
  pixels[i + 1] = gray;
  pixels[i + 2] = gray;
}

ctx.putImageData(imgData, 0, 0);

上面的代码创建了一个img元素和canvas元素,并使用canvas将图片转换成黑白图片。这个方法复杂度最高,但是可以灵活的定义需要的效果。

注:这个方法需要JavaScript实现,但是可以定制更多的样式。

结论

三种方法均可以将图片转换成黑白图片,但是使用CSS3的filter属性最为简单,适用于一些简单的场景,而使用canvas最为灵活,可以实现定制化的效果。

返回的markdown格式如下:

# 制作img黑白css

在网页设计中,经常需要将一张彩色的图片转换成黑白图片。这篇文章将介绍如何通过CSS实现这个效果。 

## 1. 使用CSS3的filter属性

CSS3新增了一些滤镜属性,其中filter属性可以处理图片的颜色,可以通过设置filter属性的值来将图片转换成黑白图片。

```css
img {
  filter: grayscale(100%);
}

上面的代码将img元素的颜色处理为灰度,值为100%时表示完全的黑白图片。

注:这个方法虽然简单,但是需要浏览器支持CSS3的filter属性。

2. 使用SVG

可以通过SVG的feColorMatrix过滤器,将图片转换成黑白图片。下面是一个使用SVG的例子。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="0" height="0">
  <filter id="grayscale">
    <feColorMatrix type="matrix"
      values="0.33 0.33 0.33 0 0
              0.33 0.33 0.33 0 0
              0.33 0.33 0.33 0 0
              0    0    0    1 0" />
  </filter>
</svg>

这个SVG定义了一个id为grayscale的过滤器,使用feColorMatrix实现灰度转换。接下来,将过滤器应用到img元素。

img {
  filter: url(#grayscale);
}

可以看到,使用SVG对图片进行处理比较麻烦,需要定义过滤器并将其应用到img元素。

注:这个方法比起第一种方法可以兼容更多的浏览器,但是代码较为冗长。

3. 使用canvas

在JavaScript中,可以使用HTML5新增的canvas元素,将图片转换成黑白图片。

<img id="image" src="path/to/image.png">
<canvas id="canvas"></canvas>

在JavaScript中,获取img元素和canvas元素,并将img元素绘制到canvas元素上,并将图像转换成灰度。

var img = document.getElementById('image');
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

canvas.width = img.width;
canvas.height = img.height;

ctx.drawImage(img, 0, 0);

var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
var pixels = imgData.data;

for (var i = 0; i < pixels.length; i += 4) {
  var r = pixels[i];
  var g = pixels[i + 1];
  var b = pixels[i + 2];
  var gray = (r + g + b) / 3;
  pixels[i] = gray;
  pixels[i + 1] = gray;
  pixels[i + 2] = gray;
}

ctx.putImageData(imgData, 0, 0);

上面的代码创建了一个img元素和canvas元素,并使用canvas将图片转换成黑白图片。这个方法复杂度最高,但是可以灵活的定义需要的效果。

注:这个方法需要JavaScript实现,但是可以定制更多的样式。

结论

三种方法均可以将图片转换成黑白图片,但是使用CSS3的filter属性最为简单,适用于一些简单的场景,而使用canvas最为灵活,可以实现定制化的效果。