js blobTobase64 ,base64Toblob ,流下载文件

1,
// atob() base64 to 字符串
// btoa() 字符串 to base64
var str = 'javascript';
window.btoa(str)
//转码结果 "amF2YXNjcmlwdA=="
window.atob("amF2YXNjcmlwdA==")
//解码结果 "javascript"
在各浏览器中,使用 window.btoa 对Unicode字符串进行编码都会触发一个字符越界的异常.

先把Unicode字符串转换为UTF-8编码,可以解决这个问题,
function utf8_to_b64( str ) {
    return window.btoa(unescape(encodeURIComponent( str )));
}

function b64_to_utf8( str ) {
    return decodeURIComponent(escape(window.atob( str )));
}

 

2,base64ToBlob
  function base64ToBlob(urlData, type) {
        
        var mime = 'image/png';
        // 去掉url的头,并转化为byte
        var bytes = window.atob(urlData);
        // 处理异常,将ascii码小于0的转换为大于0
        var ab = new ArrayBuffer(bytes.length);
        // 生成视图(直接针对内存):8位无符号整数,长度1个字节
        var ia = new Uint8Array(ab);
        for (var i = 0; i < bytes.length; i++) {
        ia[i] = bytes.charCodeAt(i);
        }
        return new Blob([ab], {
            type: mime
        });
}

3,blobTobase64

                 console.log("base64Data",base64Data);//iVBORw0KGgoA
                  var blob = base64ToBlob(base64Data);//上面第二点方法
                  blobToDataURL(blob,function(dataURL){
                       debugger;
                      console.log("dataURL",dataURL);//data:image/png;base64,iVBORw0KGgoA
                      //然后再放进img src 里
                      //对dataURL 处理 截取base64Data
                      console.log("base64Data2",dataURL.split(',')[1]);//iVBORw0KGgoA
                      
                  });


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

 

4,base64下载图片

var blob = base64ToBlob(data);
                  var reader = new FileReader()
                  reader.readAsDataURL(blob)
                  reader.onload = function(e) {
                  var a = document.createElement('a')
                  var evt = document.createEvent('MouseEvents')
                  evt.initEvent('click', false, false)// initEvent 不加后两个参数在FF下会报错
                      a.download =imgName;//图片名
                      a.href = e.target.result
                      a.id = 'alink'
                      a.dispatchEvent(evt)
                  }
                  

你可能感兴趣的:(js)