更新记录

1.0.0（2025-10-23） 下载此版本

初始版本发布

平台兼容性

uni-app(4.66)

liaction-image64

组件介绍

liaction-image64是基于uni-app平台开发的图片处理工具组件，提供拍照、选择图片、预览、保存以及转换为Base64等功能。该组件支持多平台适配，包括H5、小程序和App，并且具有一定的权限处理机制。

功能特点

• 📷 支持拍照获取图片并转换为Base64
• 📁 支持从相册选择图片并转换为Base64
• 🔍 支持图片预览功能
• 💾 支持保存图片到相册
• 🎯 内置图片压缩功能，可自定义压缩质量
• 📱 完善的权限处理机制，自动请求相机权限
• 🔄 支持多平台适配（H5、小程序、App）
• 📋 可选是否包含Base64前缀

安装说明

在uni-app项目中，通过uni_modules安装：

1. 在HBuilderX中，点击"工具" -> "插件安装"
2. 搜索"liaction-image64"并安装

使用方法

导入模块

简化导入（推荐）

// 从模块根目录导入
import { takePhoto, chooseImage, previewImage, saveImageToPhotosAlbum } from '@/uni_modules/liaction-image64';

传统导入

// 从js_sdk目录导入
import { takePhoto, chooseImage } from '@/uni_modules/liaction-image64/js_sdk/image.js';

API文档

1. takePhoto - 拍照并获取Base64编码

takePhoto(options)

参数说明：

• options (Object) - 配置选项
  • count (number) - 最多选择的图片数量，默认1
  • compress (boolean) - 是否压缩图片，默认true
  • quality (number) - 压缩质量，0-100，默认80
  • includePrefix (boolean) - 是否包含base64前缀，默认true

返回值：Promise，解析为字符串或字符串数组

• 当count=1时，返回单个base64编码字符串
• 当count>1时，返回base64编码字符串数组
• 当用户取消操作时，返回空字符串或空数组

2. chooseImage - 从相册选择图片并获取Base64编码

chooseImage(options)

参数说明：与takePhoto相同

返回值：与takePhoto相同

3. previewImage - 预览图片

previewImage(urls, current)

参数说明：

• urls (Array) - 图片URL数组
• current (number) - 当前显示的图片索引，默认0

4. saveImageToPhotosAlbum - 保存图片到相册

saveImageToPhotosAlbum(filePath)

参数说明：

• filePath (string) - 图片文件路径

返回值：Promise，解析为true表示保存成功

示例代码

基本使用示例

// 导入模块
import { takePhoto, chooseImage, previewImage, saveImageToPhotosAlbum } from '@/uni_modules/liaction-image64';

export default {
  methods: {
    // 拍照示例
    async handleTakePhoto() {
      try {
        const base64Data = await takePhoto({
          compress: true,
          quality: 80,
          includePrefix: true
        });

        if (base64Data) {
          console.log('拍照成功，Base64长度:', base64Data.length);
          // 使用base64Data进行后续操作
        }
      } catch (error) {
        console.error('拍照失败:', error);
        uni.showToast({ title: error.message || '拍照失败', icon: 'none' });
      }
    },

    // 从相册选择示例
    async handleChooseImage() {
      try {
        const base64Data = await chooseImage({
          count: 1,
          compress: true,
          quality: 80,
          includePrefix: true
        });

        if (base64Data) {
          console.log('选择图片成功，Base64长度:', base64Data.length);
          // 使用base64Data进行后续操作
        }
      } catch (error) {
        console.error('选择图片失败:', error);
        uni.showToast({ title: error.message || '选择图片失败', icon: 'none' });
      }
    },

    // 预览图片示例
    handlePreviewImage(base64Data) {
      if (base64Data) {
        previewImage([base64Data], 0);
      }
    },

    // 保存图片示例
    async handleSaveImage(filePath) {
      try {
        await saveImageToPhotosAlbum(filePath);
        uni.showToast({ title: '保存成功', icon: 'success' });
      } catch (error) {
        console.error('保存失败:', error);
        uni.showToast({ title: error.errMsg || '保存失败', icon: 'none' });
      }
    }
  }
}

兼容性说明

• ✅ H5/WEB：支持拍照、选择图片、预览和保存功能
• ✅ 微信小程序：支持拍照、选择图片、预览和保存功能
• ✅ App（iOS/Android）：支持所有功能，包含完善的权限处理
• ✅ 其他uni-app支持的平台：基本功能可用

注意事项

1. 使用拍照功能需要相机权限，请确保在manifest.json中配置了相应权限
2. H5平台下，部分功能可能受到浏览器安全策略限制
3. 小程序平台下，需注意base64字符串大小限制
4. 使用压缩功能时，质量参数值越高图片质量越好，但文件大小也越大
5. 保存图片功能在部分平台可能需要额外的存储权限