在各浏览器中,使用 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)
}