更新记录

0.0.1（2026-05-07）

• 初始版本
• 支持裁剪、旋转、翻转、缩放、模糊
• 支持扩展填充、边缘模糊、渐进式模糊
• 支持圆角、圆形裁剪
• 支持图片合成、压缩、水印
• 支持获取 EXIF 信息

平台兼容性

uni-app(4.87)

uni-app x(5.0)

lime-image-processor 图片处理 API

跨平台图片处理工具，基于 UTS 实现，支持多种图片处理操作。

核心价值

• 一站式解决方案：从基础裁剪到高级视觉效果，一套 API 搞定所有图片处理需求
• 跨平台兼容：一次编码，多端运行（Android、iOS、Harmony、Web、微信小程序）
• 高性能实现：基于 Canvas 2D API，采用可分离卷积算法实现高效模糊处理
• 智能组合：操作之间智能关联，如 extendFill 与 edgeBlur 自动配合

主要功能

🎨 基础处理

• 裁剪 (crop)：精确提取图片区域
• 旋转 (rotate)：任意角度旋转，自动计算画布尺寸
• 翻转 (flip)：水平/垂直翻转
• 缩放 (scale)：按比例缩放

✨ 模糊效果

• 高斯模糊 (blur)：全图均匀模糊
• 边缘模糊 (edgeBlur)：渐变边缘模糊，音乐播放器背景特效
• 渐进式模糊 (progressiveBlur)：单向渐变模糊

🔧 形状处理

• 圆角 (roundCorner)：添加圆角效果
• 圆形裁剪 (circleClip)：生成圆形头像

📐 智能扩展

• 扩展填充 (extendFill)：智能扩展画布，保持原图位置

🎯 高级合成

• 图片合成 (composite)：多图叠加
• 水印 (watermark)：文字/图片水印，支持平铺模式

📊 信息获取

• EXIF 信息 (getImageExif)：获取图片元数据

安装方法

1. 在 uni-app 插件市场中搜索并导入 lime-image-processor
2. 导入后在页面引入相关方法
3. 需要自定义基座才能使用（Android/iOS）

自定义基座准备（Android/iOS）

重要：在 Android 和 iOS 平台上使用本插件时，需要特别注意以下事项

自定义基座前的准备工作：

• 必须先在页面中引入相关函数：在生成自定义基座之前，确保至少在一个页面中引入并使用插件的相关函数
• 避免被树摇掉：如果没有在代码中实际引用插件函数，构建工具可能会将其视为未使用的代码而在构建过程中"树摇"掉，导致自定义基座中缺少必要的插件功能

示例：

// 在页面中至少添加以下引用代码
import { processImage } from '@/uni_modules/lime-image-processor'

快速开始

import { processImage, type ProcessImageOptions } from '@/uni_modules/lime-image-processor'

processImage({
  src: '/static/image.jpg',
  operations: [
    { type: 'crop', x: 0, y: 0, width: 100, height: 100 }
  ],
  success: (res) => {
    console.log(res.tempFilePath)
  }
} as ProcessImageOptions)

操作示例

crop - 裁剪

从原图中裁剪出指定区域。

示例代码：

import { processImage, type ProcessImageOptions } from '@/uni_modules/lime-image-processor'

processImage({
  src: '/static/image.jpg',
  operations: [
    {
      type: 'crop',
      x: 100,
      y: 100,
      width: 300,
      height: 300
    }
  ],
  success: (res) => {
    console.log(res.tempFilePath)
  }
} as ProcessImageOptions)

参数说明：

rotate - 旋转

按指定角度旋转图片。

示例代码：

import { processImage, type ProcessImageOptions } from '@/uni_modules/lime-image-processor'

processImage({
  src: '/static/image.jpg',
  operations: [
    {
      type: 'rotate',
      degree: 90
    }
  ],
  success: (res) => {
    console.log(res.tempFilePath)
  }
} as ProcessImageOptions)

参数说明：

flip - 翻转

水平或垂直翻转图片。

示例代码：

import { processImage, type ProcessImageOptions } from '@/uni_modules/lime-image-processor'

processImage({
  src: '/static/image.jpg',
  operations: [
    {
      type: 'flip',
      horizontal: true,
      vertical: false
    }
  ],
  success: (res) => {
    console.log(res.tempFilePath)
  }
} as ProcessImageOptions)

参数说明：

scale - 缩放

按比例缩放图片。

示例代码：

import { processImage, type ProcessImageOptions } from '@/uni_modules/lime-image-processor'

processImage({
  src: '/static/image.jpg',
  operations: [
    {
      type: 'scale',
      scaleX: 0.5,
      scaleY: 0.5
    }
  ],
  success: (res) => {
    console.log(res.tempFilePath)
  }
} as ProcessImageOptions)

参数说明：

blur - 模糊

高斯模糊效果，整个图片均匀模糊。

示例代码：

import { processImage, type ProcessImageOptions } from '@/uni_modules/lime-image-processor'

processImage({
  src: '/static/image.jpg',
  operations: [
    {
      type: 'blur',
      radius: 20
    }
  ],
  success: (res) => {
    console.log(res.tempFilePath)
  }
} as ProcessImageOptions)

参数说明：

平台说明：鸿蒙平台的模糊效果受限于系统 API，边缘模糊和渐进式模糊的效果可能不如其他平台平滑。

roundCorner - 圆角

给图片添加圆角效果。

示例代码：

import { processImage, type ProcessImageOptions } from '@/uni_modules/lime-image-processor'

processImage({
  src: '/static/photo.jpg',
  operations: [
    {
      type: 'roundCorner',
      radius: 50
    }
  ],
  format: 'png',
  success: (res) => {
    console.log(res.tempFilePath)
  }
} as ProcessImageOptions)

参数说明：

注意：建议使用 PNG 格式输出以保留透明背景

circleClip - 圆形裁剪

将图片裁剪为圆形（头像效果）。

示例代码：

import { processImage, type ProcessImageOptions } from '@/uni_modules/lime-image-processor'

processImage({
  src: '/static/avatar.jpg',
  operations: [
    {
      type: 'circleClip'
    }
  ],
  format: 'png',
  success: (res) => {
    console.log(res.tempFilePath)
  }
} as ProcessImageOptions)

参数说明：

注意：建议使用 PNG 格式输出以保留透明背景

extendFill - 扩展填充

将图片扩展到目标尺寸，常用于生成背景图。

示例代码：

import { processImage, type ProcessImageOptions } from '@/uni_modules/lime-image-processor'

processImage({
  src: '/static/photo.jpg',
  operations: [
    {
      type: 'extendFill',
      targetWidth: 800,
      targetHeight: 1200,
      direction: 'vertical',
      position: 50
    }
  ],
  success: (res) => {
    console.log(res.tempFilePath)
  }
} as ProcessImageOptions)

参数说明：

edgeBlur - 边缘模糊

核心功能：为图片边缘添加渐变模糊效果，常用于生成音乐播放器背景、全屏海报等场景。

设计原理：

• 将图片分为三个区域：顶部模糊区、中间清晰区、底部模糊区
• 通过渐变蒙版控制模糊强度，实现平滑过渡
• 支持自动提取图片主色并叠加，增强视觉层次感

典型应用场景：

• 🎵 音乐播放器背景：中间显示专辑封面，上下边缘渐变模糊
• 🖼️ 全屏海报：主图居中清晰，边缘自然过渡
• 📱 移动端卡片：内容区域清晰，边缘柔和模糊

示例代码：

import { processImage, type ProcessImageOptions } from '@/uni_modules/lime-image-processor'

// 基础用法：垂直边缘模糊
processImage({
  src: '/static/photo.jpg',
  operations: [
    {
      type: 'edgeBlur',
      radius: 30,
      direction: 'vertical',
      regions: [0.2, 0.6, 0.2],  // [顶部模糊区, 中间清晰区, 底部模糊区]
      transition: 0.2,             // 过渡区域大小
      enableColorOverlay: true,    // 启用主色叠加
      overlayOpacity: 0.4          // 叠加层透明度
    }
  ],
  success: (res) => {
    console.log(res.tempFilePath)
  }
} as ProcessImageOptions)

参数说明：

与 extendFill 组合使用（推荐）：

当 edgeBlur 紧跟在 extendFill 操作之后时，会自动计算模糊区域，无需手动设置 regions 参数：

processImage({
  src: '/static/album.jpg',
  operations: [
    {
      type: 'extendFill',
      targetWidth: 400,
      targetHeight: 800,
      direction: 'vertical',
      position: '50%'  // 原图居中
    },
    {
      type: 'edgeBlur',
      radius: 40,
      direction: 'vertical',
      transition: 0.2,
      enableColorOverlay: true,
      overlayOpacity: 0.4
    }
  ],
  success: (res) => {
    // 生成的图片：中间保持原图清晰，上下扩展区域模糊并叠加主色
    console.log(res.tempFilePath)
  }
} as ProcessImageOptions)

工作原理：extendFill 会记录原图在扩展后画布中的位置信息，edgeBlur 读取这些信息后，会自动将清晰区设置为原图区域，模糊区设置为扩展填充的区域，实现完美的渐变过渡效果。

平台说明：鸿蒙平台的边缘模糊效果受限于系统 API，效果可能不如其他平台平滑

progressiveBlur - 渐进式模糊

从边缘向内渐变的模糊效果。

示例代码：

import { processImage, type ProcessImageOptions } from '@/uni_modules/lime-image-processor'

processImage({
  src: '/static/photo.jpg',
  operations: [
    {
      type: 'progressiveBlur',
      direction: 'down',
      radius: 10,
      offset: 0.3,
      interpolation: 0.4
    }
  ],
  success: (res) => {
    console.log(res.tempFilePath)
  }
} as ProcessImageOptions)

参数说明：

平台说明：鸿蒙平台的渐进式模糊效果受限于系统 API，效果可能不如其他平台平滑

链式操作示例

多个操作可以组合使用，按顺序执行。

示例代码：

import { processImage, type ProcessImageOptions } from '@/uni_modules/lime-image-processor'

processImage({
  src: '/static/photo.jpg',
  operations: [
    { type: 'scale', scaleX: 0.8, scaleY: 0.8 },
    { type: 'rotate', degree: 15 },
    { type: 'roundCorner', radius: 30 },
    { type: 'blur', radius: 5 }
  ],
  quality: 0.9,
  format: 'jpg',
  success: (res) => {
    console.log(res.tempFilePath)
  }
} as ProcessImageOptions)

扩展填充 + 边缘模糊组合

智能组合使用，自动计算模糊区域。

示例代码：

import { processImage, type ProcessImageOptions } from '@/uni_modules/lime-image-processor'

processImage({
  src: '/static/photo.jpg',
  operations: [
    {
      type: 'extendFill',
      targetWidth: 800,
      targetHeight: 1200,
      direction: 'vertical',
      position: 50
    },
    {
      type: 'edgeBlur',
      radius: 40,
      direction: 'vertical',
      transition: 0.2,
      enableColorOverlay: true,
      overlayOpacity: 0.4
    }
  ],
  success: (res) => {
    console.log(res.tempFilePath)
  }
} as ProcessImageOptions)

提示：与 extendFill 组合使用时，edgeBlur 的 regions 参数可以省略，会自动根据原图位置计算

其他 API

composite - 图片合成

将多张图片叠加到底图上。

示例代码：

import { composite, type CompositeOptions } from '@/uni_modules/lime-image-processor'

composite({
  src: '/static/bg.jpg',
  images: [
    { src: '/static/logo.png', position: 'topLeft', alpha: 0.8 },
    { src: '/static/avatar.png', position: { x: 100, y: 100 }, alpha: 1 }
  ],
  success: (res) => {
    console.log(res.tempFilePath)
  }
} as CompositeOptions)

watermark - 添加水印

添加水印，支持文字水印和图片水印。

示例代码：

import { watermark, type WatermarkOptions } from '@/uni_modules/lime-image-processor'

watermark({
  src: '/static/photo.jpg',
  texts: [{
    text: 'WATERMARK',
    tile: true,
    tileGap: { x: 50, y: 50 },
    rotate: -30,
    fontSize: 24,
    color: '#ff0000',
    alpha: 0.4
  }],
  format: 'png',
  success: (res) => {
    console.log(res.tempFilePath)
  }
} as WatermarkOptions)

getImageExif - 获取 EXIF 信息

获取图片的 EXIF 元数据信息。

示例代码：

import { getImageExif, type GetImageExifOptions } from '@/uni_modules/lime-image-processor'

getImageExif({
  src: '/static/photo.jpg',
  success: (res) => {
    console.log('相机品牌', res.make)
    console.log('相机型号', res.model)
    console.log('拍摄时间', res.dateTime)
    console.log('GPS信息', res.gps)
  }
} as GetImageExifOptions)

详细 API 文档

processImage

图片处理主 API，支持多种操作链式执行。

提示词示例：

请使用 lime-image-processor 插件将图片缩放到 50%，然后添加 20px 的圆角，最后输出为 PNG 格式。

ProcessImageOptions 参数说明

返回说明 (ImageProcessResult)

composite

图片合成，将多张图片叠加到底图上。

CompositeOptions 参数说明

watermark

添加水印，支持文字水印和图片水印。

WatermarkOptions 参数说明

文字水印参数 (TextWatermark)

图片水印参数 (ImageWatermark)

getImageExif

获取图片的 EXIF 元数据信息。

GetImageExifOptions 参数说明

返回说明 (ExifInfo)

位置预设值

图片位置支持以下预设值：

或使用自定义坐标：

{ x: 50, y: 50 }           // 距离左上角 50px
{ left: 10, bottom: 20 }    // 距离左侧 10px，底部 20px

错误码

注意事项

1. 所有操作按顺序执行，前一个操作的输出作为后一个操作的输入
2. tempFilePath 可能是 dataURL 也可能是真实文件路径，取决于平台
3. 边缘模糊配合扩展填充使用时，可省略 regions 参数，会自动计算
4. 圆角和圆形裁剪建议使用 PNG 格式以保留透明背景
5. 水印支持平铺模式，适合批量制作水印图
6. 鸿蒙平台的 edgeBlur（边缘模糊）和 progressiveBlur（渐进式模糊）效果受限于系统 API，效果可能不如其他平台平滑

平台支持