在一般情况下我们进行图片转换为base64：
function getBase64Image(img) {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, img.width, img.height);
var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
var dataURL = canvas.toDataURL("image/" + ext);
return dataURL;
}
这样是没有问题的，但是当我们将base64转为二进制或者Blob的时候我们通常会用这个函数：
function dataURLtoBlob(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
});
}
一般情况下是没有问题的，但是有时候确实会报出错：
Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.
这时有人会在“bstr = atob(arr[1]),”这里加上“decodeURIComponent”,但是也没有用处，这时请看看你的base64的最后面有没有“]”或“ " ”
因为这些都不会被转译，所以要加上这一行：
var _arr = arr[1].substring(0,arr[1].length-2);
我是因为在最后面多了一个引号和中括号，所以是减2，每个人会视情况儿定。
最终的代码是：
dataURLtoBlob(dataurl) {
var arr = dataurl.split(',');
//注意base64的最后面中括号和引号是不转译的
var _arr = arr[1].substring(0,arr[1].length-2);
var mime = arr[0].match(/:(.*?);/)[1],
bstr =atob(_arr),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {
type: mime
});
},
网友评论