js-url转换blob以及blob与base64的相互转换

置酒天晴

已于 2024-04-08 12:47:22 修改

阅读量6.1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： # js封装篇文章标签： javascript

于 2020-10-27 19:40:58 首次发布

本文链接：https://blog.csdn.net/qq_33226029/article/details/109318860

js封装篇专栏收录该内容

7 篇文章

订阅专栏

本文提供了从URL获取Blob数据的方法及Blob转换为Base64字符串和Base64字符串转换为Blob的具体实现。通过异步请求获取Blob数据，并利用FileReader API完成格式之间的相互转换。

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

下面的代码是我在网上cv的，不记得是找的哪个的了，放在这帮助更多有缘人

url转blob

function xhrequest(url, callback) {
  //创建XMLHttpRequest对象
  var xhr = new XMLHttpRequest();
  //前两个参数固定，第三个参数true时是异步，false时是同步
  xhr.open("get", url, true);
  //选定输出格式为blob格式
  xhr.responseType = "blob";
  //onload后回调this本身  onload本身不携带参数
  xhr.onload = function() {
    callback(this);
  };
  //关闭xhr  一定要加
  xhr.send();
}
export default xhrequest;

blob转base64

这里使用readAsDataURL比createObjectURL好一些
详情参考：https://blog.csdn.net/qq_36671474/article/details/100545250

function fileReader(blob, callback) {
  //创建FileReader对象
  let reader = new FileReader();
    reader.readAsDataURL(blob); //读取文件保存在result中
    reader.onload = function(e) {
      callback(e);
    };
}
export default fileReader;

base64转blob

注：此方法来自：

https://blog.csdn.net/weixin_34395205/article/details/86207842?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160566159019724842959303%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id=160566159019724842959303&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2_allsobaiduend~default-2-86207842.pc_first_rank_v2_rank_v28&utm_term=js+base64%E8%BD%ACblob&spm=1018.2118.3001.4449

这里使用readAsDataURL比createObjectURL好一些
详情参考：https://blog.csdn.net/qq_36671474/article/details/100545250

    function dataURItoBlob(dataURI) {
        var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]; // mime类型
        var byteString = atob(dataURI.split(',')[1]); //base64 解码
        var arrayBuffer = new ArrayBuffer(byteString.length); //创建缓冲数组
        var intArray = new Uint8Array(arrayBuffer); //创建视图

        for (var i = 0; i < byteString.length; i++) {
            intArray[i] = byteString.charCodeAt(i);
        }
        return new Blob([intArray], {type: mimeString});
    }
    export default dataURItoBlob;