HarmonyOS 鸿蒙Next Web组件加载H5时，H5中转换base64出错

发布于 1周前 作者 ionicwang 来自 鸿蒙OS

HarmonyOS 鸿蒙Next Web组件加载H5时，H5中转换base64出错

前提：
1. H5中加载本地图片，意图将图片转换成base64格式
2. Web组件通过$rawfile加载该H5

问题：
H5中转换base64时出错、查阅相关资料，怀疑是Web组件file协议造成的跨域问题
安卓侧没问题

资料地址：
https://www.cnblogs.com/Marydon20170307/p/10718495.html
https://blog.csdn.net/sumimg/article/details/115375085

Harmonyos Next教程
2 回复

可以尝试将图片解码成pixelmap，使用imagePacker.packing的方法转成arraybuffer再编码Base64

转化方式如下，请验证：

pixelMap - > base64:
const imagePackerApi = image.createImagePacker();
let packOpts: image.PackingOption = { format: "image/jpeg", quality: 100 };
imagePackerApi.packing(this.pixmap, packOpts).then((data: ArrayBuffer) => { // data 为打包获取到的文件流，写入文件保存即可得到一张图片 
  if (data) {
    let buf: buffer.Buffer = buffer.from(data);
    let baseStr: string = buf.toString('base64', 0, buf.length);
    console.log('66666' +
    JSON.stringify(baseStr)) //送显 
    this.imgStr = "data:image/jpeg;base64," + baseStr;
  }
}).catch((error: BusinessError) => {
  console.error('Failed to pack the image. And the error is: ' + error);
})

针对HarmonyOS鸿蒙Next Web组件在加载H5页面时，H5中转换base64出错的问题，这通常涉及到数据编码和解码的过程。以下是一些可能的原因及排查方向：

  1. 字符集问题：确保在H5页面和鸿蒙系统之间的数据传输中，字符集保持一致，特别是处理中文或其他非ASCII字符时。

  2. 数据完整性：检查base64编码前的原始数据是否完整无损，任何数据丢失或修改都可能导致解码失败。

  3. 编码/解码库：确认H5中使用的base64编码/解码库是否兼容当前环境，尝试更换其他库看是否解决问题。

  4. 内存限制：鸿蒙系统可能对Web组件的内存使用有限制，对于大体积的base64数据，尝试分段处理或优化数据大小。

  5. 系统版本：检查鸿蒙系统的版本是否支持当前使用的所有Web技术特性，包括base64处理。

  6. 日志与调试：利用鸿蒙提供的开发者工具，查看详细的错误日志，这有助于定位问题根源。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html。通过专业客服的帮助，可以进一步排查和解决具体的技术问题。

回到顶部