vue-image-mask 图片蒙版编辑组件
简介
是一个基于Vue 3和Element Plus的图片蒙版编辑组件，提供直观的界面让用户通过笔刷工具在图片上创建蒙版效果。
功能特点
- 🎨 笔刷工具：可调整大小(5-100px)和硬度(0-100%)
- 🔍 画布操作：支持缩放(0.1-5倍)和平移
- ⏪ 历史记录：撤销/重做功能，最多保存50步操作
- 🖱️ 多交互模式：笔刷模式和平移模式切换
- 📱 响应式设计：适配不同屏幕尺寸
- 🖼️ 图片处理：支持加载、编辑和保存图片
- 🔄 重置功能：一键恢复原始图片
- ⚡ 高性能：平滑绘制体验，优化的笔刷算法
使用方法
基本用法
<template>
<div>
<el-upload
class="upload-section"
action="#"
:auto-upload="false"
:show-file-list="false"
@change="loadImage"
>
<el-button type="primary">选择图片</el-button>
</el-upload>
<vue-image-mask ref="imageMaskRef" @save-image="handleSaveImage" />
</div>
</template>
<script setup>
import { ref } from 'vue'
import {ElButton, ElUpload,} from 'element-plus'
import VueImageMask from 'vue-image-mask'
const imageMaskRef = ref()
const loadImage = (event) => {
const file = event.raw;
if (!file) return;
const imageUrl = URL.createObjectURL(file); // ✅ 转换为临时 URL
imageMaskRef.value.openMask(imageUrl);
};
</script>
API
组件属性
无特殊属性，通过ref调用组件方法
组件事件
| 事件名 | 说明 | 参数 |
|---|---|---|
| save-image | 保存图片时触发 | dataUrl: string (图片的base64编码) |
暴露方法
：打开图片蒙版编辑器
- 参数：imageSrc (图片URL或base64字符串)
界面说明
工具栏
- 笔刷控制：调整笔刷大小和硬度
- 编辑模式：切换笔刷模式/平移模式
- 操作按钮：重置、撤销、重做、保存
- 缩放信息：显示当前缩放比例
交互操作
- 缩放：鼠标滚轮缩放画布
- 平移：在平移模式下拖动画布
- 绘制：在笔刷模式下绘制蒙版区域
注意事项
- 跨域图片处理：组件已设置
crossOrigin: 'anonymous'属性，但仍可能存在Canvas污染问题 - 性能考虑：对于超大图片可能会有性能影响，建议先进行适当压缩
- 浏览器支持：需要现代浏览器支持Canvas API
- 历史记录限制：最多保存50步操作，超出后将自动清除最早的记录
