b64_image转图片

Question

微信小程序js接收到b64_image，就是很长的字符串，怎么转成图片显示到wxml

Answer 1

参考通义千问和郭老师的小迷弟雅思莫了-编写提供，主要是为了帮助您快速解决问题，如下回答，您可以参考下，如有问题，评论区留言。

在微信小程序中，将接收到的Base64编码格式的图片字符串（b64_image）直接显示到WXML中的<image>标签内，可以按照以下步骤进行：

// 假设你有一个接收到的Base64格式的图片数据
var b64ImageData = 'data:image/jpeg;base64,AAAAAAAAAAAAAAAAAAAAAAAAAAAA...';

// 直接赋值给image标签的src属性
Page({
  data: {
    imageUrl: '',
  },
  onLoad: function() {
    // 在这里假设你已经获取到了base64格式的图片数据并存储在变量b64ImageData中
    this.setData({
      imageUrl: b64ImageData,
    });
  },
});

// 在WXML文件中使用
<image src="{{imageUrl}}" mode="widthFix" />

// 注意：如果图片数据是从后端API获取的，确保处理过程中没有引入额外的换行符或空格

如果你遇到由于特殊字符、换行符等问题导致图片无法显示，需要先对Base64字符串进行清理，去除其中的换行符和不必要的空白字符。同时确认图片的MIME类型（如上述示例中的'image/jpeg'）是否正确对应了图片的实际格式。

另外，微信小程序在处理大体积的Base64图片时可能会有性能问题，对于较大的图片建议将其转存为本地临时文件后再进行加载，可以使用wx.base64ToArrayBuffer方法转换为ArrayBuffer，然后通过wx.saveFile保存为临时文件，最后使用file://路径来加载图片。例如：

wx.base64ToArrayBuffer({
  base64Data: b64ImageData.replace(/^data:image\/\w+;base64,/, ''),
  success: function(res) {
    wx.saveFile({
      tempFilePath: res.tempFilePath,
      success: function(res) {
        var savedFilePath = res.savedFilePath;
        // 更新数据模型中的图片路径
        this.setData({
          imageUrl: savedFilePath,
        });
      }.bind(this),
    });
  }.bind(this),
});