前端ArrayBuffer和String、Blob和DataUrl的相互转换

2021-09-08

字数统计: 485字 | 阅读时长≈ 2分

在之前写公司的业务的时候有这样的一个需求，通过 XMLHttpRequest 拿到图片的二进制内容。然后将 ArrayBuffer 中的数据暂存在 JSON 中，所以需要涉及到 ArrayBuffer 和 String 的相互转换。
记录一下

/**
 * @description 将ArrayBuffer对象转换成string
 * @param {ArrayBuffer} buf - ArrayBuffer对象
 */
function bufferToString(buf): Promise<string> {
  return new Promise((resolve) => {
    var blob = new Blob([buf], { type: "application/octet-stream" });
    var reader = new FileReader();
    reader.onload = function (event) {
      const result = event.target.result as string;
      // console.log("result",result);
      resolve(result);
    };

    reader.readAsText(blob, "utf-8");
  });
}

/**
 * @description 将string转换成ArrayBuffer
 * @param {string} str - 参数string
 */
function stringToBuffer(str): Promise<ArrayBuffer> {
  return new Promise((resolve) => {
    var blob = new Blob([str], { type: "text/plain" });
    var reader = new FileReader();
    reader.onload = function (event) {
      const result = event.target.result as ArrayBuffer;
      // console.log("result",result);
      resolve(result);
    };

    reader.readAsArrayBuffer(blob);
  });
}

但是问题并没有完全解决，原因大概是，图片二进制内容 ArrayBuffer 转换成 string 类型，通过 utf-8 编码生成的乱码，再转换回去时候，二进制数据内容和长度发生了变化。
于是，我结合另一个情景，前端图片经常使用 DataUrl 表示(DataUlr 使用的也就是 Base64 编码)，所以我把图片转成成 DataUrl，保存的时候存下这个 DataUrl,使用的时候再转换成二进制内容。
于是，设置 XMLHttpRequest.responseType = 'blob';
然后问题就变成了 Blob 与 DataUrl 的转换

/**
 * @description 将blob转换成DataUrl
 * @param {Blob} blob - blob
 */
function blobToDataUrl(blob: Blob): Promise<string> {
  return new Promise((resolve) => {
    var reader = new FileReader();
    reader.onload = function (event) {
      const result = event.target.result as string;
      // console.log("result",result);
      resolve(result);
    };

    reader.readAsDataURL(blob);
  });
}

/**
 * @description 将DataUrl转换成Blob
 * @param {string} dataurl - 参数dataurl （base64编码）
 */
function dataUrlToBlob(dataurl: string): Promise<Blob> {
  return new Promise((resolve) => {
    var arr = dataurl.split(","),
      mime = arr[0].match(/:(.*?);/)[1],
      bstr = atob(arr[1]),
      n = bstr.length,
      u8arr = new Uint8Array(n);
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n);
    }
    let blob = new Blob([u8arr], { type: mime });
    resolve(blob);
  });
}

本文作者： Tsailor
本文链接： http://tsailor.github.io/2021/09/08/前端ArrayBuffer和String、Blob和DataUrl的相互转换/
版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！