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

实现纯色图片换色

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

(好久没更新了,近一年真是一言难尽......)

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

效果:

原图

更改之后的

写在最后

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

相关推荐
行云&流水15 分钟前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐23 分钟前
零基础学HTML和CSS:网页设计入门
前端·css
老虎062731 分钟前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
灿灿121381 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css
烛阴1 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript
AntBlack1 小时前
拖了五个月 ,不当韭菜体验版算是正式发布了
前端·后端·python
31535669131 小时前
一个简单的脚本,让pdf开启夜间模式
前端·后端
尘心cx1 小时前
前端-CSS-day1
前端·css
知否技术2 小时前
前端常说的 SCSS是个啥玩意?一篇文章给你讲的明明白白!
前端·scss
幼儿园技术家2 小时前
Uniapp简易使用canvas绘制分享海报
前端