记录前端更改纯色图片的几种方式

实现纯色图片换色

当然，你也可以不用纯色图片，只是换出来都成了纯色......

（好久没更新了，近一年真是一言难尽......）

一、通过filter: drop-shadow

filter: drop-shadow(x偏移 y偏移 模糊大小 色值)

大概原理：通过在原图片上设置投影，投影是在图片的下面，可以通过偏移量来改变投影位置，改变投影的颜色来达到改变图片颜色的效果，最后再通过外层盒子达到只显示投影，这样就完成了图片的换色。

实现：

<style>
  .container {
    overflow: hidden;
    width: 100px;
    height: 100px;
    margin: 0 auto;
    border: 1px solid #CCC;
  }
  .test-img {
    width: 100%;
    height: 100%;

    /* 变换y */
    /* filter: drop-shadow(0px 100px 0px #CCC);
    transform: translateY(-100px); */

    /* 变换x */
    filter: drop-shadow(100px 0px 0px #CCC);
    transform: translateX(-100px);
  }
</style>

<div class="container">
  <img src="./images/test.webp" class="test-img">
</div>

效果：

未隐藏原图

隐藏原图

二、通过mask

mask-image mask-repeat mask-size

当然 mask 还有其他属性也可以达到效果，有兴趣的可以研究一下~

大概原理：通过 mask-image 设置一个元素的蒙版图像，在默认的情况下，蒙版图像的 alpha 通道将与元素的 alpha 通道相乘（大概就是说，生成的蒙版图像，图片的背景透明度和元素的透明度结合，如果背景设置颜色，图片的透明处和背景结合也就成了透明，图片的不透明处，也就是有颜色的地方和背景结合就显示对应的颜色，文本描述很抽象，可以在代码中更改参数看效果）。再通过 mask-repeat 设置蒙层图像不重复，最后通过 mask-size 设置蒙版图像的尺寸达到换色的效果。

实现：

<style>
  .container {
    overflow: hidden;
    width: 100px;
    height: 100px;
    margin: 0 auto;
    background-color: rgba(0, 255, 0, .4);
    -webkit-mask-image: url(./images/test.webp);
    mask-image: url(./images/test.webp);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: cover;
    mask-size: cover;
  }
</style>

<div class="container"></div>

效果：

三、通过canvas

大概原理：通过 canvas 操作部分区域的像素点来达到效果。

实现：

<canvas id="canvas">您的浏览器不支持画布元素</canvas>

<script>
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  const rgbaArr = [0, 255, 0, 0];
  const [r1, r2, r3, r4] = rgbaArr;

  const image = new Image();
  image.onload = function () {
    ctx.drawImage(image, 0, 0, 100, 100);

    const imageData = ctx.getImageData(0, 0, 100, 100);

    let len = imageData.data.length;

    for (let i = 0; i < len; i += 4) {
      imageData.data[i] = r1;
      imageData.data[i + 1] = r2;
      imageData.data[i + 2] = r3;
    }
    ctx.putImageData(imageData, 0, 0);
  }
  image.src = './images/test.webp';
</script>

效果：

原图

更改之后的

写在最后

只是提供了几种实现更改纯色图片颜色需求的简单方式，如果还有其他较好的方式后面发现了再补充。其中没有对比各种方式的优缺点优缺点，只是工作中遇到相应的需求，然后去参考相应的文档，最后做一个大概得记录......