15种滤镜一键实现！vue3-image-filter让前端图片处理效率提升10倍

最新推荐文章于 2025-08-19 09:51:49 发布
原创 最新推荐文章于 2025-08-19 09:51:49 发布 · 679 阅读 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

15种滤镜一键实现！vue3-image-filter让前端图片处理效率提升10倍

【免费下载链接】vue3-image-filter 一个基于PixiJS的图片滤镜处理插件，支持Vue3和Vue2，提供多种图片滤镜效果处理功能。 【免费下载链接】vue3-image-filter 项目地址: https://gitcode.com/nutpi/vue3-image-filter

你还在为前端图片滤镜效果开发繁琐而烦恼吗？尝试了多个库却始终无法达到理想的性能和效果？本文将全面解析基于PixiJS的vue3-image-filter图片滤镜处理插件，带你掌握从基础使用到高级定制的全流程，让你在10分钟内拥有专业级图片处理能力。

读完本文你将获得：

  • 15种预设滤镜效果的快速集成方案
  • 自定义滤镜参数调整的实现方法
  • 批量图片处理的高效工作流
  • 前端性能优化的实战技巧
  • 完整的项目搭建与部署指南

项目概述：vue3-image-filter是什么？

vue3-image-filter是一个基于Vue3和PixiJS的高性能图片滤镜处理插件，它提供了丰富的滤镜效果和灵活的API接口，让开发者能够轻松实现专业级的图片处理功能。该项目采用WebGL加速渲染，相比传统Canvas实现，处理速度提升3-5倍，同时支持Vue2和Vue3两种版本，兼容性强。

核心优势

特性传统Canvas实现vue3-image-filter提升幅度
渲染性能一般优秀（WebGL加速）300-500%
滤镜数量有限15+预设，支持扩展200%+
API友好度低高（Vue组件化）易用性提升
定制能力复杂简单（参数化调整）开发效率提升
批量处理困难简单（内置批量接口）工作流优化

技术架构

mermaid

快速开始：5分钟上手教程

环境准备

首先确保你的开发环境满足以下要求：

  • Node.js 14.0.0+
  • Vue 3.0.0+ 或 Vue 2.7.0+
  • npm 6.0.0+ 或 yarn 1.22.0+

安装步骤

# 通过npm安装
npm install vue3-image-filter --save

# 或通过yarn安装
yarn add vue3-image-filter

# 如需克隆源码仓库
git clone https://gitcode.com/nutpi/vue3-image-filter
cd vue3-image-filter
npm install
npm run dev

基础使用示例

<template>
  <div class="image-filter-container">
    <single-upload-img @upload-success="handleUploadSuccess" />
    <image-filter 
      :image-url="imageUrl" 
      :active-filter="activeFilter"
      :filter-params="filterParams"
      @filter-applied="handleFilterApplied"
    />
    <div class="filter-controls">
      <button v-for="filter in filterTypes" 
              :key="filter.type" 
              @click="activeFilter = filter.type">
        {{ filter.name }}
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import SingleUploadImg from 'vue3-image-filter/components/Upload/singleUploadImg.vue';
import ImageFilter from 'vue3-image-filter/components/ImageFilter.vue';

const imageUrl = ref('');
const activeFilter = ref('natural');
const filterParams = ref({
  brightness: 1.05,
  saturation: 1.05,
  contrast: 1.05
});

const filterTypes = [
  { type: 'natural', name: '自然效果' },
  { type: 'grayscale', name: '黑白效果' },
  { type: 'vintage', name: '复古效果' },
  { type: 'mosaic', name: '马赛克效果' },
  // 其他滤镜类型...
];

const handleUploadSuccess = (url: string) => {
  imageUrl.value = url;
};

const handleFilterApplied = (result: string) => {
  console.log('滤镜应用成功，结果:', result);
  // 处理滤镜应用后的结果，如显示、下载等
};
</script>

滤镜效果全解析

预设滤镜类型

vue3-image-filter提供了15种预设滤镜效果，涵盖了日常开发中常见的图片处理需求：

mermaid

颜色调整类滤镜

亮度调整（brightness）

调整图片的亮度值，参数范围0.0-5.0，默认值1.0。

// 使用示例
const brightnessFilter = {
  filterType: 'brightness',
  filterParams: { brightness: 1.5 }, // 增加50%亮度
  label: '增加亮度'
};
对比度调整（contrast）

调整图片的对比度，参数范围0.0-5.0，默认值1.0。

// 使用示例
const contrastFilter = {
  filterType: 'contrast',
  filterParams: { contrast: 1.3 }, // 增加30%对比度
  label: '增强对比度'
};
饱和度调整（saturation）

调整图片的色彩饱和度，参数范围0.0-3.0，默认值1.0。

// 使用示例
const saturationFilter = {
  filterType: 'saturation',
  filterParams: { saturation: 2.0 }, // 增加100%饱和度
  label: '鲜艳色彩'
};

风格转换类滤镜

自然效果（natural）

模拟自然增强效果，综合调整亮度、饱和度、对比度等参数。

// 使用示例
const naturalFilter = {
  filterType: 'natural',
  filterParams: {
    brightness: 1.05,
    saturation: 1.05,
    contrast: 1.05,
    temperature: 0.05,
    gamma: 1.05
  },
  label: '自然增强'
};

该滤镜通过调整多个参数，使图片看起来更加自然生动，适合大多数日常照片处理。

复古效果（vintage）

模拟老照片效果，添加褐色调、噪点和划痕效果。

// 使用示例
const vintageFilter = {
  filterType: 'vintage',
  filterParams: {
    sepia: 0.8,  // 褐色程度
    noise: 0.2,  // 噪点数量
    scratch: 0.1 // 划痕强度
  },
  label: '复古照片'
};
黑白效果（grayscale）

将彩色图片转换为黑白图片，可调整灰度强度。

// 使用示例
const grayscaleFilter = {
  filterType: 'grayscaleAdjust',
  filterParams: { grayIntensity: 0.8 }, // 80%灰度
  label: '黑白照片'
};

特效处理类滤镜

马赛克效果（mosaic）

将图片转换为马赛克效果，可调整像素块大小。

// 使用示例
const mosaicFilter = {
  filterType: 'mosaic',
  filterParams: {
    uTileSizeX: 15, // 横向像素块大小
    uTileSizeY: 15  // 纵向像素块大小
  },
  label: '马赛克效果'
};
反色效果（invert）

将图片颜色反转，可调整反相强度。

// 使用示例
const invertFilter = {
  filterType: 'invertAdjust',
  filterParams: { invertIntensity: 0.7 }, // 70%反相
  label: '反色效果'
};

模糊锐化类滤镜

高斯模糊（gaussian）

实现图片模糊效果，可调整模糊程度。

// 使用示例
const blurFilter = {
  filterType: 'blurFilter',
  filterParams: { blur: 10 }, // 模糊程度为10
  label: '高斯模糊'
};
锐化效果（sharpen）

增强图片细节，使模糊的图片变得清晰。

// 使用示例
const sharpenFilter = {
  filterType: 'sharpen',
  filterParams: { strength: 0.7 }, // 锐化强度
  label: '图片锐化'
};

高级功能：自定义与批量处理

滤镜参数调整

vue3-image-filter允许你通过调整参数来定制滤镜效果，每个滤镜都有其特定的可调整参数：

// 滤镜参数范围定义示例
export const filterParamsRange = {
  natural: {
    brightness: { min: 0.5, max: 2.0, step: 0.05, label: "亮度" },
    saturation: { min: 0.0, max: 2.0, step: 0.05, label: "饱和度" },
    contrast: { min: 0.5, max: 2.0, step: 0.05, label: "对比度" },
    temperature: { min: -0.5, max: 0.5, step: 0.05, label: "色温" },
    gamma: { min: 0.5, max: 2.0, step: 0.05, label: "伽马值" },
  },
  // 其他滤镜参数范围...
};

你可以在UI中根据这些范围创建调整控件，实现实时预览效果：

<template>
  <div class="filter-controls">
    <div v-for="(param, key) in currentFilterParams" :key="key">
      <label>{{ param.label }}</label>
      <input 
        type="range" 
        :min="param.min" 
        :max="param.max" 
        :step="param.step"
        :value="filterParams[key]"
        @input="updateParam(key, $event.target.value)"
      >
      <span>{{ filterParams[key] }}</span>
    </div>
  </div>
</template>

批量处理多张图片

vue3-image-filter提供了批量处理功能，可以同时对多张图片应用相同或不同的滤镜效果：

// 批量处理示例
import { PixiFilter } from 'vue3-image-filter/core/PixiFilter';

// 创建滤镜实例
const filter = new PixiFilter({ width: 800, height: 600 });

// 待处理的图片列表
const imagesToProcess = [
  { url: 'image1.jpg', filters: ['brightness', 'contrast'] },
  { url: 'image2.jpg', filters: ['vintage', 'sharpen'] },
  { url: 'image3.jpg', filters: ['mosaic'] }
];

// 处理结果
const processedResults = [];

// 批量处理函数
async function batchProcessImages() {
  for (const image of imagesToProcess) {
    try {
      // 加载图片
      await filter.loadImage(image.url);
      
      // 创建滤镜数据数组
      const filterDataArray = image.filters.map(filterType => ({
        filterType,
        filterParams: getDefaultParams(filterType),
        label: `${filterType}-${Date.now()}`
      }));
      
      // 应用多个滤镜
      const result = await filter.applyFilters(filterDataArray);
      processedResults.push(result);
    } catch (error) {
      console.error(`处理图片 ${image.url} 失败:`, error);
    }
  }
  
  // 处理完成，销毁滤镜实例
  filter.destroy();
  
  return processedResults;
}

// 执行批量处理
batchProcessImages().then(results => {
  console.log('批量处理完成，结果:', results);
  // 处理结果展示或下载
});

自定义滤镜

如果你需要实现预设之外的滤镜效果，可以通过自定义着色器（Shader）来扩展：

// 自定义滤镜示例 - 创建一个复古电影效果滤镜
import { PIXI } from 'pixi.js';

export const createVintageMovieFilter = (sprite, filterParams) => {
  // 顶点着色器
  const vertexShader = `
    attribute vec2 aVertexPosition;
    attribute vec2 aTextureCoord;
    uniform mat3 projectionMatrix;
    varying vec2 vTextureCoord;
    
    void main() {
      vTextureCoord = aTextureCoord;
      gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);
    }
  `;
  
  // 片段着色器 - 自定义滤镜逻辑
  const fragmentShader = `
    varying vec2 vTextureCoord;
    uniform sampler2D uSampler;
    uniform float time;
    
    void main() {
      vec4 color = texture2D(uSampler, vTextureCoord);
      
      // 复古色调 - 增加红色和绿色通道
      color.r += 0.1;
      color.g += 0.05;
      
      // 添加扫描线效果
      float scanline = sin(vTextureCoord.y * 200.0 + time) * 0.05;
      color.rgb += scanline;
      
      gl_FragColor = color;
    }
  `;
  
  // 创建自定义滤镜
  return new PIXI.Filter(vertexShader, fragmentShader, {
    time: 0.0, // 时间参数，用于动画效果
    ...filterParams
  });
};

// 注册自定义滤镜
import { registerFilterCreator } from 'vue3-image-filter/utils/shadersUtils';
registerFilterCreator('vintageMovie', createVintageMovieFilter);

项目实战：构建一个图片滤镜应用

项目结构

vue3-image-filter-demo/
├── public/
├── src/
│   ├── assets/        # 静态资源
│   ├── components/    # 自定义组件
│   │   ├── ImageUploader.vue  # 图片上传组件
│   │   ├── FilterSelector.vue # 滤镜选择组件
│   │   ├── ParameterAdjuster.vue # 参数调整组件
│   │   └── ResultDisplay.vue  # 结果展示组件
│   ├── views/         # 页面视图
│   │   ├── SingleFilterView.vue  # 单图片处理视图
│   │   └── BatchFilterView.vue   # 批量处理视图
│   ├── utils/         # 工具函数
│   ├── App.vue        # 应用入口组件
│   └── main.ts        # 应用入口文件
├── package.json
└── vite.config.ts

核心组件实现

图片上传组件 (ImageUploader.vue)
<template>
  <div class="image-uploader">
    <input 
      type="file" 
      ref="fileInput" 
      accept="image/*" 
      multiple
      @change="handleFileChange"
      class="hidden"
    >
    <button @click="triggerUpload" class="upload-btn">
      <i class="upload-icon"></i> 选择图片
    </button>
    <div class="upload-preview" v-if="previewUrls.length">
      <div v-for="(url, index) in previewUrls" :key="index" class="preview-item">
        <img :src="url" :alt="`预览图 ${index+1}`">
        <button @click="removeImage(index)" class="remove-btn">×</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, emit } from 'vue';
import { fileToBase64 } from 'vue3-image-filter/utils/shadersUtils';

const fileInput = ref<HTMLInputElement | null>(null);
const previewUrls = ref<string[]>([]);
const files = ref<File[]>([]);

const triggerUpload = () => {
  fileInput.value?.click();
};

const handleFileChange = async (e: Event) => {
  const target = e.target as HTMLInputElement;
  if (!target.files || target.files.length === 0) return;
  
  const newFiles = Array.from(target.files);
  
  // 转换为base64预览
  for (const file of newFiles) {
    try {
      const base64Url = await fileToBase64(file);
      previewUrls.value.push(base64Url);
      files.value.push(file);
    } catch (error) {
      console.error('文件转换失败:', error);
    }
  }
  
  // 触发上传成功事件
  emit('upload-success', {
    files: files.value,
    previewUrls: previewUrls.value
  });
  
  // 清空input值，允许重复上传同一文件
  target.value = '';
};

const removeImage = (index: number) => {
  previewUrls.value.splice(index, 1);
  files.value.splice(index, 1);
  
  // 触发删除事件
  emit('image-removed', {
    files: files.value,
    previewUrls: previewUrls.value
  });
};
</script>
主应用组件 (App.vue)
<template>
  <div class="app-container">
    <header class="app-header">
      <h1>vue3-image-filter 图片处理工具</h1>
      <div class="app-nav">
        <button :class="{active: viewMode === 'single'}" @click="viewMode = 'single'">单图处理</button>
        <button :class="{active: viewMode === 'batch'}" @click="viewMode = 'batch'">批量处理</button>
      </div>
    </header>
    
    <main class="app-main">
      <image-uploader 
        @upload-success="handleUploadSuccess"
        :multiple="viewMode === 'batch'"
      />
      
      <div class="filter-section" v-if="previewUrls.length">
        <filter-selector 
          v-model="activeFilter"
          @filter-change="handleFilterChange"
        />
        
        <parameter-adjuster 
          :filter-type="activeFilter"
          :params="filterParams"
          @params-change="handleParamsChange"
        />
        
        <div class="filter-result">
          <div class="original-image">
            <h3>原图</h3>
            <img :src="currentImage" alt="原图">
          </div>
          <div class="filtered-image">
            <h3>处理后</h3>
            <image-filter 
              :image-url="currentImage"
              :active-filter="activeFilter"
              :filter-params="filterParams"
              @filter-applied="handleFilterApplied"
            />
          </div>
        </div>
        
        <div class="result-actions">
          <button @click="downloadResult" :disabled="!filteredResult">
            下载图片
          </button>
          <button @click="saveFilterPreset" class="secondary-btn">
            保存为预设
          </button>
        </div>
      </div>
    </main>
    
    <footer class="app-footer">
      <p>vue3-image-filter &copy; 2023 | 基于PixiJS构建</p>
    </footer>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue';
import ImageUploader from './components/ImageUploader.vue';
import FilterSelector from './components/FilterSelector.vue';
import ParameterAdjuster from './components/ParameterAdjuster.vue';
import ImageFilter from 'vue3-image-filter/components/ImageFilter.vue';
import { filterParamsRange } from 'vue3-image-filter/utils/shadersUtils';

// 视图模式：single-单图处理，batch-批量处理
const viewMode = ref<'single' | 'batch'>('single');

// 上传相关
const previewUrls = ref<string[]>([]);
const currentImage = ref('');
const filteredResult = ref('');

// 滤镜相关
const activeFilter = ref('natural');
const filterParams = ref<any>({});
const availableFilters = ref<any[]>([]);

// 初始化滤镜参数
const initFilterParams = (filterType: string) => {
  const paramsConfig = filterParamsRange[filterType] || {};
  const defaultParams = {};
  
  for (const key in paramsConfig) {
    // 设置默认值为范围的中间值
    const config = paramsConfig[key];
    defaultParams[key] = (config.min + config.max) / 2;
  }
  
  filterParams.value = defaultParams;
};

// 处理上传成功
const handleUploadSuccess = (data) => {
  previewUrls.value = data.previewUrls;
  currentImage.value = data.previewUrls[0]; // 默认显示第一张图片
  
  // 如果是首次上传，初始化滤镜参数
  if (!Object.keys(filterParams.value).length) {
    initFilterParams(activeFilter.value);
  }
};

// 处理滤镜变更
const handleFilterChange = (newFilter) => {
  activeFilter.value = newFilter;
  initFilterParams(newFilter);
};

// 处理参数变更
const handleParamsChange = (newParams) => {
  filterParams.value = { ...filterParams.value, ...newParams };
};

// 处理滤镜应用完成
const handleFilterApplied = (result) => {
  filteredResult.value = result;
};

// 下载处理结果
const downloadResult = () => {
  if (!filteredResult.value) return;
  
  const link = document.createElement('a');
  link.href = filteredResult.value;
  link.download = `filtered-${Date.now()}.png`;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
};

// 保存滤镜预设
const saveFilterPreset = () => {
  const preset = {
    name: `${activeFilter.value}-${Date.now()}`,
    filterType: activeFilter.value,
    params: filterParams.value,
    createdAt: new Date().toISOString()
  };
  
  // 保存到localStorage
  const presets = JSON.parse(localStorage.getItem('filterPresets') || '[]');
  presets.push(preset);
  localStorage.setItem('filterPresets', JSON.stringify(presets));
  
  alert('预设保存成功！');
};

// 初始化：获取可用滤镜列表
availableFilters.value = Object.keys(filterParamsRange);
</script>

性能优化与最佳实践

性能优化策略

  1. 图片尺寸优化

    • 在应用滤镜前，将大图缩小到合适尺寸（如1920px以内）
    • 使用适当的图片格式（WebP格式比JPEG节省30%带宽）

  2. 滤镜应用优化

    // 优化前
for (const filter of filters) {
  await filter.loadImage(imageUrl);
  await filter.applyFilter(filterData);
}

// 优化后 - 复用滤镜实例
await filter.loadImage(imageUrl);
for (const filterData of filtersData) {
  await filter.applyFilter(filterData);
}
filter.destroy();

  3. WebGL上下文管理

    • 及时销毁不再使用的PixiFilter实例
    • 限制同时处理的图片数量，避免WebGL上下文耗尽

常见问题解决方案

问题1：滤镜应用后图片模糊

解决方案：确保容器尺寸与图片原始比例一致，避免拉伸压缩

/* 正确的样式设置 */
.image-container {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-container img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain; /* 保持比例，不拉伸 */
}
问题2：大型图片处理卡顿

解决方案：实现分片处理和进度反馈

// 大型图片处理优化
async function processLargeImage(imageUrl, chunkSize = 1024) {
  // 创建进度条
  const progressBar = document.createElement('div');
  progressBar.className = 'processing-progress';
  document.body.appendChild(progressBar);
  
  try {
    // 加载图片
    await filter.loadImage(imageUrl);
    
    // 获取图片尺寸
    const { width, height } = filter.getImageSize();
    
    // 计算分块数量
    const totalChunks = Math.ceil(Math.max(width, height) / chunkSize);
    let processedChunks = 0;
    
    // 应用滤镜，带进度更新
    const result = await filter.applyFilterWithProgress(filterData, (progress) => {
      processedChunks = Math.round(progress * totalChunks);
      progressBar.style.width = `${progress * 100}%`;
      progressBar.textContent = `${Math.round(progress * 100)}%`;
    });
    
    return result;
  } finally {
    // 移除进度条
    document.body.removeChild(progressBar);
  }
}
问题3：移动设备性能问题

解决方案：降低移动设备上的渲染分辨率

// 响应式分辨率设置
function getOptimalResolution() {
  const isMobile = window.innerWidth < 768;
  const isTablet = window.innerWidth < 1024 && window.innerWidth >= 768;
  
  if (isMobile) {
    return { width: 800, height: 600 }; // 移动设备低分辨率
  } else if (isTablet) {
    return { width: 1200, height: 900 }; // 平板中等分辨率
  } else {
    return { width: 1920, height: 1080 }; // 桌面高分辨率
  }
}

// 创建滤镜实例时使用优化的分辨率
const filter = new PixiFilter(getOptimalResolution());

最佳实践

  1. 错误处理

    // 完善的错误处理
async function safeApplyFilter(filter, imageUrl, filterData) {
  try {
    // 检查图片URL
    if (!imageUrl || !imageUrl.startsWith('data:') && !imageUrl.startsWith('http')) {
      throw new Error('无效的图片URL');
    }

    // 加载图片
    await filter.loadImage(imageUrl);

    // 应用滤镜
    const result = await filter.applyFilter(filterData);
    return { success: true, result };
  } catch (error) {
    console.error('应用滤镜失败:', error);
    return { 
      success: false, 
      error: error.message || '未知错误',
      timestamp: new Date().toISOString()
    };
  }
}

  2. 资源释放

    // 组件卸载时清理资源
onUnmounted(() => {
  if (filterInstance) {
    filterInstance.destroy(); // 销毁滤镜实例
    filterInstance = null;
  }

  // 清除WebGL上下文
  const canvasElements = document.querySelectorAll('canvas.pixi-canvas');
  canvasElements.forEach(canvas => {
    const gl = canvas.getContext('webgl');
    gl?.getExtension('WEBGL_lose_context')?.loseContext();
  });
});

  3. 用户体验优化

    • 添加加载状态指示器
    • 实现滤镜应用的进度条
    • 提供撤销/重做功能
    • 支持键盘快捷键操作

总结与展望

vue3-image-filter插件通过结合Vue3的组件化优势和PixiJS的高性能渲染能力，为前端图片处理提供了一套完整的解决方案。无论是简单的亮度调整，还是复杂的特效处理，都能通过简洁的API快速实现。

已实现功能

  • 15种预设滤镜效果
  • 自定义滤镜参数调整
  • 批量图片处理
  • 滤镜效果实时预览
  • 处理结果下载
  • 滤镜预设保存与加载

未来展望

  1. 功能扩展

    • 添加AI辅助滤镜推荐
    • 实现人脸检测与智能美颜
    • 支持图片合成与叠加效果

  2. 性能优化

    • WebWorker离线处理
    • WebAssembly加速复杂计算
    • 滤镜效果预编译缓存

  3. 生态建设

    • 滤镜效果社区分享平台
    • 企业级定制化服务
    • 移动端原生应用支持

通过本文的介绍，相信你已经掌握了vue3-image-filter的核心用法和高级技巧。无论是开发图片编辑应用、社交媒体平台，还是电商产品展示，vue3-image-filter都能为你提供强大的图片处理能力，帮助你打造更优秀的用户体验。

如果你在使用过程中遇到任何问题，或有新的功能需求，欢迎通过项目仓库提交issue或PR，让我们一起完善这个优秀的开源项目！

附录：完整API参考

PixiFilter类

方法参数返回值描述
constructoroptions: {width, height}PixiFilter实例创建滤镜实例
loadImageimageSource: stringPromise 加载图片
applyFilterfilterData: BatchFilterDataBatchFilterData应用单个滤镜
applyFiltersfilterDataArray: BatchFilterData[]BatchFilterData[]应用多个滤镜
destroy无void销毁实例，释放资源

滤镜类型与参数

滤镜类型参数范围默认值描述
naturalbrightness0.5-2.01.05亮度
naturalsaturation0.0-2.01.05饱和度
naturalcontrast0.5-2.01.05对比度
naturaltemperature-0.5-0.50.05色温
naturalgamma0.5-2.01.05伽马值
brightnessbrightness0.0-5.01.0亮度值
contrastcontrast0.0-5.01.0对比度值
saturationsaturation0.0-3.01.0饱和度值
vintagesepia0.0-1.00.8褐色程度
vintagenoise0.0-1.00.2噪点数量
vintagescratch0.0-1.00.1划痕强度
mosaicuTileSizeX1-5010横向像素块大小
mosaicuTileSizeY1-5010纵向像素块大小
sharpenstrength0.0-1.00.5锐化强度
blurFilterblur0.0-100.00模糊程度

事件接口

事件名参数描述
filter-appliedresult: string滤镜应用完成事件
upload-success{files, previewUrls}图片上传成功事件
image-removed{files, previewUrls}图片移除事件
params-changenewParams: object参数变更事件
filter-changenewFilter: string滤镜类型变更事件

希望本文能够帮助你快速掌握vue3-image-filter的使用，如果你觉得这个项目有价值，请给它一个Star支持！同时也欢迎贡献代码，一起完善这个开源项目。

点赞 + 收藏 + 关注，获取更多前端图片处理技巧和最佳实践！下期预告：《如何使用WebAssembly进一步提升前端图片处理性能》。

【免费下载链接】vue3-image-filter 一个基于PixiJS的图片滤镜处理插件，支持Vue3和Vue2，提供多种图片滤镜效果处理功能。 【免费下载链接】vue3-image-filter 项目地址: https://gitcode.com/nutpi/vue3-image-filter

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值