前端JS 实现文件Url、base64、File、Blob、ArrayBuffer相互转换方法

• 前端

常见图片格式转换

  • 常见格式介绍
    • file对象 转换为 base64
    • base64 转换为 Blob
    • base64 转换为 file
    • Blob 转换为 blob地址
    • blob 转换为 ArrayBuffer
    • buffer转换为 Blob
    • 图片URL 转换为 blob和base64
    • Blob 转 base64

常见格式介绍

file对象 转换为 base64

let reader = new FileReader();
reader.readAsDataURL(file[0])
console.log(reader)

base64 转换为 Blob

base64ToBlob(urlData) {
  let arr = urlData.split(",");
  let mime = arr[0].match(/:(.*?);/)[1];
  let bstr = atob(arr[1]);
  let n = bstr.length;
  let u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], { type: mime });
}

base64 转换为 file

base64toFile(dataurl, fileName) {
  let arr = dataurl.split(",");
  // let mime = arr[0].match(/:(.*?);/)[1];
  let bstr = atob(arr[1]);
  let n = bstr.length;
  let u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new File([u8arr], fileName);
}

Blob 转换为 blob地址

BlobToBlobURL(BlobFile，type) {
  let blob = new Blob([BlobFile], { type : type });// 图片："image/jpeg"
  const blobUrl = URL.createObjectURL(blob);
  return blobUrl ;
}

blob 转换为 ArrayBuffer

blobToArrayBuffer(){
let blob = new Blob([1,2,3,4])
let reader = new FileReader();
reader.onload = function(result) {
    console.log(result);
}
reader.readAsArrayBuffer(blob);
}

buffer转换为 Blob

let blob = new Blob([buffer])

图片URL 转换为 blob和base64

urlToBlobBase64(imgUrl) {
  return new Promise((resolve) => {
    window.URL = window.URL || window.webkitURL;
    var xhr = new XMLHttpRequest();
    xhr.open("get", imgUrl, true);
    xhr.responseType = "blob";
    xhr.onload = function () {
      if (this.status == 200) {
        var blob = this.response;
        let oFileReader = new FileReader();
        oFileReader.onloadend = function (e) {
          resolve({ blob, base64: e.target.result });
        };
        oFileReader.readAsDataURL(blob);
      } else {
        reject(new Error("异常"));
      }
    };
    xhr.send();
    xhr.onerror = () => {
      reject(new Error("异常"));
    };
  });
}

Blob 转 base64

 function blobToDataURI(blob,callback) {
   var reader = new FileReader();
   reader.readAsDataURL(blob);
   reader.onload = function (e) {
     callback(e.target.result);
   };
 }

// 调用
 blobToDataURI(blobData, function (result) {
    console.log(result);
});

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/51fea99849.html

赞 (0)
« 上一篇 1天前
下一篇 » 1天前

相关推荐