微信小程序开发实战：图片转 Base64 全解析

引言

在微信小程序开发中，经常会遇到需要将用户选中的图片转换为 Base64 格式的需求。这种需求可能出现在头像上传、二维码生成、数据加密传输等多种场景中。本文将详细介绍三种主流的图片转 Base64 方法，分析其原理、优缺点及适用场景，并提供完整的代码示例。

一、通过 wx.request + ArrayBuffer 实现

核心原理

该方法通过发起 HTTP 请求获取图片二进制数据（ArrayBuffer），再利用小程序内置的 wx.arrayBufferToBase64() 方法进行编码转换。由于小程序安全机制限制，只能对合法域名下的资源发起请求。

完整示例代码

async getImageTobase64_url(tempFilePath) {
    const base64 = await new Promise(resolve => {
      wx.request({
        url: tempFilePath, // 本地临时路径需特殊处理
        responseType: 'arraybuffer', // 关键参数设置返回类型
        success: res => {
          // 将 ArrayBuffer 转换为 Base64 字符串
          let data = wx.arrayBufferToBase64(res.data);
          // 添加 MIME 类型前缀
          resolve(`data:image/jpeg;base64,${data}`);
        }
      });
    });
    this.setData({ base64 });
},

技术要点解析

• responseType: 'arraybuffer'：强制返回二进制数据而非文本流
• wx.arrayBufferToBase64()：小程序提供的原生二进制转 Base64 API
• MIME 类型声明 ：data:image/jpeg;base64, 前缀确保浏览器正确解析

优缺点分析

优点	缺点
✅ 支持网络图片转换	❌ 本地文件路径需特殊处理
✅ 可结合拦截器扩展功能	❌ 涉及网络 I/O 性能较差
✅ 适合大尺寸图片处理	❌ 受小程序域名白名单限制

适用场景

• 网络图片实时抓取转换
• 需要添加请求头/参数的图片处理
• 与其他网络请求合并处理的场景

二、通过 Canvas 绘制转换

核心原理

创建离屏 Canvas 元素，将图片绘制到画布上，最后调用 toDataURL() 方法获取 Base64 编码结果。该方法本质上是模拟浏览器端的 Canvas 转换方案。

完整示例代码

async getImageBase64_canvas(tempFilePath) {
    // 获取图片原始尺寸
    const { width } = await wx.getImageInfo({ src: tempFilePath });
    
    const base64 = await new Promise(resolve => {
      const query = wx.createSelectorQuery();
      query.select("#myCanvas").fields({ node: true }).exec(res => {
        const canvas = res[0].node;
        const ctx = canvas.getContext('2d');
        const image = canvas.createImage();
        
        image.src = tempFilePath;
        image.onload = () => {
          // 按原图尺寸绘制
          ctx.drawImage(image, 0, 0, width, width * (image.height / image.width));
          // 获取 Base64 结果
          resolve(canvas.toDataURL());
        };
      });
    });
    this.setData({ base64 });
},

WXML 配套代码

<canvas id="myCanvas" type="2d" hidden="true"></canvas>

技术要点解析

• 尺寸计算 ：通过 wx.getImageInfo 获取原始宽高比，避免拉伸变形
• 离屏渲染：隐藏的 Canvas 元素不会显示在界面上
• 异步加载：图片加载完成后才能进行绘制操作

优缺点分析

优点	缺点
✅ 可进行二次图形处理	❌ 代码复杂度较高
✅ 精确控制输出质量	❌ 内存占用较大
✅ 支持动态修改参数	❌ 存在绘制延迟

适用场景

• 需要裁剪/旋转等预处理的场景
• 生成带水印的特殊图片
• 实现自定义滤镜效果后的编码

三、通过文件系统管理器直接读取

核心原理

使用小程序提供的 wx.getFileSystemManager().readFile() API，直接以 Base64 编码格式读取本地文件内容。这是最直接高效的实现方式。

完整示例代码

async getImageBase64_readFile(tempFilePath) {
    const base64 = await new Promise(resolve => {
      wx.getFileSystemManager().readFile({
        filePath: tempFilePath, // 本地临时路径
        encoding: 'base64', // 关键参数设置编码格式
        success: ({ data }) => {
          // 添加 MIME 类型前缀（注意根据实际情况调整）
          resolve(`data:image/png;base64,${data}`);
        }
      });
    });
    this.setData({ base64 });
},

技术要点解析

• encoding: 'base64'：直接指定返回数据的编码格式
• 文件路径处理 ：可直接使用 wx.chooseImage 返回的临时路径
• 同步版本 ：也存在 readFileSync 同步方法可供选用

优缺点分析

优点	缺点
🚀 性能最优	⚠️ 仅支持本地文件
🛠️ 代码简洁易用	📝 缺乏预处理能力
📱 真机表现稳定	🔄 无法处理网络图片

适用场景

• 纯本地图片处理场景
• 快速预览功能的实现
• 批量图片处理的基础方法

四、完整流程示例

以下是结合三种方法的完整业务逻辑示例：

async btnChooseImage() {
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: (res) => {
        const tempFilePaths = res.tempFilePaths;
        // 同时演示三种方法
        this.getImageTobase64_url(tempFilePaths[0]);
        this.getImageBase64_canvas(tempFilePaths[0]);
        this.getImageBase64_readFile(tempFilePaths[0]);
      }
    })
},