文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

JS中如何将base64转换成file

2023-05-16 11:28

关注

js将base64转换成file

dataURLtoBlob(dataurl, name) {//base64转file
      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)
      }
      return new File([u8arr], name, {
        type: mime,
      })
    },
this.dataURLtoBlob(imgDataUrl,name)//imgDataUrl是base64格式编码  name是图片名字

将Base64转file对象,将图片转Base64

//将图片转换为Base64
function getImgToBase64(url,callback){
  var canvas = document.createElement('canvas'),
    ctx = canvas.getContext('2d'),
    img = new Image;
  img.crossOrigin = 'Anonymous';
  img.onload = function(){
    canvas.height = img.height;
    canvas.width = img.width;
    ctx.drawImage(img,0,0);
    var dataURL = canvas.toDataURL('image/png');
    callback(dataURL);
    canvas = null;
  };
  img.src = url;
}
 
//将base64转换为文件对象
function dataURLtoFile(dataurl, filename) {
  var arr = dataurl.split(',');
  var mime = arr[0].match(/:(.*?);/)[1];
  var bstr = atob(arr[1]);
  var n = bstr.length; 
  var u8arr = new Uint8Array(n);
  while(n--){
      u8arr[n] = bstr.charCodeAt(n);
  }
  //转换成file对象
  return new File([u8arr], filename, {type:mime});
  //转换成成blob对象
  //return new Blob([u8arr],{type:mime});
}
//将图片转换为base64,再将base64转换成file对象
getImgToBase64('images/ruoshui.png',function(data){
   var myFile = dataURLtoFile(data,'testimgtestimgtestimg');
   console.log(myFile);
});
 
 
// 将 file 转 base64
    blobToDataURL (blob, cb) {
      const reader = new FileReader()
      reader.onload = function (evt) {
        cb(evt.target.result)
      }
      reader.readAsDataURL(blob)
    },

js图片base64转file文件两种方式

最近项目中需要实现把图片的base64编码转成file文件的功能,然后再上传至服务器。起初是直接通过new File()的方式进行转换,在各个主流的浏览器基本上都支持,Android也没问题,但是在ios系统埋了个坑,ios11.4以下的系统上传失败。

定位bug发现是new File()这个方法不兼容ios系统,只能另辟蹊径,最后找到一个方法就是:

将base64转成blob ——> blob转成file

这种方式测试通过,解决了new File()不兼容ios系统问题。

下面将base64转file文件两种方式的代码贴出来:

1.通过new File()将base64转换成file文件,此方式需考虑浏览器兼容问题。

    //将base64转换为文件
    dataURLtoFile: function(dataurl, filename) { 
        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);
        }
        return new File([u8arr], filename, { type: mime });
    },
 
 
    //调用
    var file = dataURLtoFile(base64Data, imgName);

2.先将base64转换成blob,再将blob转换成file文件,此方法不存在浏览器不兼容问题。

    //将base64转换为blob
    dataURLtoBlob: function(dataurl) { 
        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);
        }
        return new Blob([u8arr], { type: mime });
    },
    //将blob转换为file
    blobToFile: function(theBlob, fileName){
       theBlob.lastModifiedDate = new Date();
       theBlob.name = fileName;
       return theBlob;
    },
    //调用
    var blob = dataURLtoBlob(base64Data);
    var file = blobToFile(blob, imgName);

目前方法二在项目中已经可以正常使用。

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯