更新记录

1.0.0（2026-04-22） 下载此版本

• 初始版本
• 支持图片选择
• 支持默认整图展示
• 支持微信风格的单页画笔标注
• 支持撤销、重做、清空
• 当前只保留 brush 能力
• 支持预览与删除

平台兼容性

uni-app

其他

lq-image-editing

uni-app 纯画笔图片编辑组件。适用于 APP、H5 等场景，支持选择图片后进入单页编辑界面，默认完整展示整张图片，并进行画笔标注、撤销、重做、清空和导出回传。

插件描述

lq-image-editing 是一个面向 uni-app 的轻量级图片标注组件，整体交互参考常见聊天工具中的图片编辑流程。

它不做复杂裁剪、缩放或多功能编辑堆叠，只聚焦最常用的一条链路：

• 选择图片
• 进入编辑页
• 默认完整展示原图
• 直接使用画笔进行标注
• 完成后导出新图片并回传到页面

适合以下业务：

• 现场巡检拍照标注
• 考核反馈图片说明
• 问题点位圈画
• 移动端快速图片批注

功能描述

• 选择图片后自动进入编辑页
• 编辑页默认完整展示整张图片
• 支持多种画笔颜色切换
• 支持多档线宽切换
• 支持撤销
• 支持重做
• 支持清空当前标注
• 支持完成后导出新的临时图片
• 输出数据结构兼容常见上传列表格式

适用平台

• App app-vue
• H5
• 小程序

安装方式

将插件放入项目 uni_modules 目录后即可使用。

基本用法

<template>
    <view>
        <lq-image-editing
            v-model="fileList"
            :max-count="6"
            :size-type="['compressed']"
            :tools="['brush']"
        ></lq-image-editing>
    </view>
</template>

<script>
export default {
    data() {
        return {
            fileList: []
        };
    }
};
</script>

Props

返回数据结构

组件输出的每一项格式如下：

{
    url: '本地临时文件路径',
    progress: 0,
    error: false,
    file: {
        path: '本地临时文件路径',
        size: 12345
    }
}

这样可以直接接入现有上传逻辑。

设计说明

• 编辑页默认完整展示整张图片，不先裁切
• 整体交互更接近常见即时通讯工具中的图片编辑页
• 顶部提供取消、撤销、重做
• 底部提供颜色、线宽、清空、完成
• 画笔仅在图片区域内生效，避免误触到黑色留白区域

注意事项

• 页面跳转使用的是插件页 uni_modules/lq-image-editing/pages/editor/index
• 为保证本地开发和 H5 / App 运行稳定，建议在项目根 pages.json 中显式注册插件页
• 若发布到 uni-app 插件市场，建议同时保留 pages_init.json，方便导入插件时自动提示合并页面配置
• 若你的图片特别大，导出时会创建同尺寸 canvas，建议在业务侧控制图片大小或开启压缩选择

更新日志

详见 changelog.md