如何用Vue实现图像模糊和饱和度调整？

安装pica插件

npm install pica

具体实现代码如下：

<template>
  <div>
    <img :src="imageUrl" alt="image" />
    <button @click="blurImage">应用模糊效果</button>
    <button @click="adjustSaturation">调整饱和度</button>
  </div>
</template>
 
<script>
import pica from 'pica';
export default {
  data() {
    return {
      imageUrl: 'images/pic.jpg',
    };
  },
  methods: {
    async blurImage() {
      const img = new Image();
      img.src = this.imageUrl;
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
 
      // 调整画布尺寸与图片一致
      canvas.width = img.width;
      canvas.height = img.height;
 
      // 在画布上绘制图片
      ctx.drawImage(img, 0, 0);
 
      // 应用模糊效果
      const picaResizer = pica();
      const blurredImage = await picaResizer.resize(canvas, canvas, { blur: 5 });
 
      // 将模糊后的图片展示在<img>标签中
      this.imageUrl = blurredImage.toDataURL();
    },
    async adjustSaturation() {
      const img = new Image();
      img.src = this.imageUrl;
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
 
      // 调整画布尺寸与图片一致
      canvas.width = img.width;
      canvas.height = img.height;
 
      // 在画布上绘制图片
      ctx.drawImage(img, 0, 0);
 
      // 应用饱和度调整
      const picaResizer = pica();
      const adjustedImage = await picaResizer.resize(canvas, canvas, { saturation: 0.5 });

      // 将调整后的图片展示在<img>标签中
      this.imageUrl = adjustedImage.toDataURL();
    },
  },
};
</script>

如何用Vue实现图片的逆时针和顺时针旋转？

Vue中如何利用插件对图片进行进行裁剪

Vue中如何利用脚手架实现图片的裁剪功能

如何在Vue中实现图片的黑白处理？

如何在Vue中实现图片的灰度处理？

标签： Vue图像模糊, Vue图像饱和度, Vue图片处理

上面是“如何用Vue实现图像模糊和饱和度调整？”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_12992.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！