uni-app 插件发布：图像转为base64、base64存储为图片

发布于 1周前 作者 htzhanglong 来自 Uni-App

uni-app 插件发布：图像转为base64、base64存储为图片 图像转换工具，可用于如下环境：uni-app、微信小程序、5+APP、浏览器

插件地址：http://ext.dcloud.net.cn/plugin?id=123

使用方式

NPM

npm i image-tools --save

import { pathToBase64, base64ToPath } from 'image-tools'

直接下载

// 以下路径需根据项目实际情况填写  
import { pathToBase64, base64ToPath } from '../../js/image-tools/index.js'

API

pathToBase64

从图像路径转换为base64，uni-app、微信小程序和5+APP使用的路径不支持网络路径，如果是网络路径需要先使用下载API下载下来。

pathToBase64(path)
  .then(base64 => {  
    console.log(base64)  
  })  
  .catch(error => {  
    console.error(error)  
  })

base64ToPath

将图像base64保存为文件，返回文件路径。

base64ToPath(base64)
  .then(path => {  
    console.log(path)  
  })  
  .catch(error => {  
    console.error(error)  
  })

Harmonyos Next教程
1 回复

在uni-app中，插件开发可以极大地扩展应用的功能。针对你所提到的“图像转为base64”以及“base64存储为图片”的功能，以下是一个简单的插件实现示例。这个示例展示了如何使用JavaScript和uni-app的API来完成这两个任务。

图像转为Base64

首先，我们需要一个函数来将图像文件转换为Base64编码的字符串。这可以通过uni.chooseImage选择图片，然后使用uni.getFileSystemManager读取文件内容并转换为Base64。

// 图像转为Base64函数
function imageToBase64() {
    uni.chooseImage({
        count: 1,
        success: function (res) {
            const filePath = res.tempFilePaths[0];
            const fs = uni.getFileSystemManager();
            fs.readFile({
                filePath: filePath,
                encoding: 'base64',
                success: function (data) {
                    const base64Data = 'data:image/png;base64,' + data.data; // 假设图片是png格式，根据实际情况修改
                    console.log(base64Data);
                    // 这里可以调用存储Base64为图片的函数
                    // storeBase64AsImage(base64Data);
                },
                fail: function (err) {
                    console.error('读取文件失败', err);
                }
            });
        },
        fail: function (err) {
            console.error('选择图片失败', err);
        }
    });
}

Base64存储为图片

接下来，我们需要一个函数来将Base64编码的字符串存储为图片文件。这可以通过uni.getFileSystemManager创建文件并写入Base64数据来实现。

// Base64存储为图片函数
function storeBase64AsImage(base64Data) {
    const fs = uni.getFileSystemManager();
    const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64Data) || [];
    if (!format) {
        return console.error('ERROR_BASE64_PARSE');
    }
    const timeStamp = new Date().getTime();
    const filePath = `${wx.env.USER_DATA_PATH}/tmp_base64src_${timeStamp}.${format}`;
    
    const buffer = wx.arrayBufferToBase64(uni.base64ToArrayBuffer(bodyData));
    
    fs.writeFile({
        filePath: filePath,
        data: buffer,
        encoding: 'binary',
        success: function () {
            console.log('图片保存成功', filePath);
        },
        fail: function (err) {
            console.error('保存图片失败', err);
        }
    });
}

使用

你可以在你的uni-app项目中调用imageToBase64函数来选择图片并转换为Base64，然后在成功回调中调用storeBase64AsImage函数来存储Base64为图片。

注意：以上代码示例中的文件路径处理和数据格式转换可能需要根据实际情况进行调整。此外，对于跨平台开发，特别是涉及到文件系统操作时，务必测试在不同平台（如iOS、Android、H5等）上的兼容性。

回到顶部