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

实现纯色图片换色

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

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

一、通过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>

效果：

原图

更改之后的

写在最后

只是提供了几种实现更改纯色图片颜色需求的简单方式，如果还有其他较好的方式后面发现了再补充。其中没有对比各种方式的优缺点优缺点，只是工作中遇到相应的需求，然后去参考相应的文档，最后做一个大概得记录。（掘金同名，微信公众号：“前端学习小营地”）……