实现纯色图片换色
当然,你也可以不用纯色图片,只是换出来都成了纯色......
(好久没更新了,近一年真是一言难尽......)
一、通过filter: drop-shadow
filter: drop-shadow(x偏移 y偏移 模糊大小 色值)
大概原理:通过在原图片上设置投影,投影是在图片的下面,可以通过偏移量来改变投影位置,改变投影的颜色来达到改变图片颜色的效果,最后再通过外层盒子达到只显示投影,这样就完成了图片的换色。
实现:
html
<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
设置蒙版图像的尺寸达到换色的效果。
实现:
html
<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
操作部分区域的像素点来达到效果。
实现:
html
<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>
效果:
原图

更改之后的

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