JS图片转换格式（转Blob）

最新推荐文章于 2025-07-15 09:24:37 发布

Dreamer_xr

最新推荐文章于 2025-07-15 09:24:37 发布

阅读量1.7w

点赞数 1

CC 4.0 BY-SA版权

分类专栏：原生JavaScript 文章标签：转blob file转Blob base64转blob

本文链接：https://blog.youkuaiyun.com/xr510002594/article/details/89306736

原生JavaScript 专栏收录该内容

13 篇文章

订阅专栏

本文介绍如何使用JavaScript将图片文件和Base64编码转换为Blob对象，包括file格式和Base64字符串转Blob的具体步骤及XHR方法的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

file格式转Blob

<input type="file" accept="image/*" @change="upLoad">


upLoad(e){
  console.log(this.getFileUrl(e.srcElement))
},
getFileUrl(obj) { 
  let url; 
  url = window.URL.createObjectURL(obj.files.item(0)); 
  return url; 
},

base64转Blob

//ndata为base64格式地址
let arr = ndata.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 bdata = new Blob([u8arr], {type: mime})

通过XHR的方法来转转Blob

let xhr = new XMLHttpRequest();
xhr.open("get", "http://mybg.oss-cn-hangzhou.aliyuncs.com/2019031510452423", true);
xhr.responseType = "blob";
xhr.onload = function (res) {
  if (this.status == 200) {
    var blob = this.response;
    var img = document.createElement("img");
    img.onload = function (e) {
      window.URL.revokeObjectURL(img.src); // 清除释放
    };
    //img.src为Blob格式的img资源
    img.src = window.URL.createObjectURL(blob);
    console.log(img.src)
  }
}
xhr.send();