为了账号安全,请及时绑定邮箱和手机立即绑定

将blob转换为base64

将blob转换为base64

小唯快跑啊 2019-08-27 11:12:08
将blob转换为base64这是我要Blob对Base64字符串执行的代码的代码段:这个注释部分有效,当由此生成的URL设置为img src时,它会显示图像:var blob = items[i].getAsFile();//var URLObj = window.URL || window.webkitURL;//var source = URLObj.createObjectURL(blob);//console.log("image source=" + source);var reader = new FileReader();reader.onload = function(event){console.log(event.target.result)}; // data url!var source = reader.readAsBinaryString(blob);问题是代码越低,生成的源变量为null更新:有没有更简单的方法来使用JQuery从Blob文件创建Base64字符串,如上面的代码?
查看完整描述

3 回答

?
慕勒3428872

TA贡献1848条经验 获得超6个赞

 var reader = new FileReader();
 reader.readAsDataURL(blob); 
 reader.onloadend = function() {
     var base64data = reader.result;                
     console.log(base64data);
 }

文档 readAsDataURL编码形式为base64


查看完整回答
反对 回复 2019-08-27
?
动漫人物

TA贡献1815条经验 获得超10个赞

这对我有用:

var blobToBase64 = function(blob, callback) {
    var reader = new FileReader();
    reader.onload = function() {
        var dataUrl = reader.result;
        var base64 = dataUrl.split(',')[1];
        callback(base64);
    };
    reader.readAsDataURL(blob);};


查看完整回答
反对 回复 2019-08-27
?
桃花长相依

TA贡献1860条经验 获得超8个赞

所以问题是你想要上传一个基础64图像,你有一个blob网址。现在,适用于所有html 5浏览器的答案是:执行:

  var fileInput = document.getElementById('myFileInputTag');
  var preview = document.getElementById('myImgTag');

  fileInput.addEventListener('change', function (e) {
      var url = URL.createObjectURL(e.target.files[0]);
      preview.setAttribute('src', url);
  });function Upload(){
     // preview can be image object or image element
     var myCanvas = document.getElementById('MyCanvas');
     var ctx = myCanvas.getContext('2d');
     ctx.drawImage(preview, 0,0);
     var base64Str = myCanvas.toDataURL();
     $.ajax({
         url: '/PathToServer',
         method: 'POST',
         data: {
             imageString: base64Str         },
     success: function(data) { if(data && data.Success) {}},
     error: function(a,b,c){alert(c);}
     });
 }


查看完整回答
反对 回复 2019-08-27
  • 3 回答
  • 0 关注
  • 2879 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信