javascript - window.atob 无法解码字符串并抛出错误
问题描述
function saveIMG(image) {
var startIndex = image.indexOf("base64,") + 7;
var b64 = image.substr(startIndex, image.indexOf(">") - startIndex - 2);
var byteCharacters = atob(b64);
var byteNumbers = new Array(byteCharacters.length);
for (var i = 0; i < byteCharacters.length; i++) {
byteNumbers[i] = byteCharacters.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
var data = new Blob([byteArray], {type: 'image/jpeg'});
return "<img src='" + window.URL.createObjectURL(data) + "' width='150'/>";
}
我想使用此代码将 base64 图像编码为使用 URL 的图像。但是,在它使用atob
它的行上会引发此错误:
未捕获的 DOMException:无法在 'Window' 上执行 'atob':要解码的字符串未正确编码。
我只能假设它与 base64 有关,或者它可能无法使用atob
. 无论如何,这是从子字符串中获取的 base64 的开头:
/9j/4AAQSkZJRgABAQEASABIAAD/7RTuUGhvdG9zaG9wIDMuMAA4QklNBAQAAAAAAA8cAVoAAxslRxwCAAACAAAAOEJJTQQlAAAAAAAQzc/6fajHvgkFcHaurwXDTjhCSU0EOgAAAAAA5QAAABAAAAABAAAAAAALcHJpbnRPdXRwdXQAAAAFAAAAAFBzdFNib29sAQAAAABJbnRlZW51bQAAAABJbnRlAAAAAENscm0AAAAPcHJpbnRTaXh0ZWVuQml0Ym9vbAAA
解决方案
从这里我会说你的问题出在 substr 第二个参数中:
image.indexOf(">") - startIndex - 2
虽然您的其余代码指向正常的 dataURI,但这部分意味着存在一个在那里无效的字符(>
)。
所以我强烈怀疑第二个参数的值是 -1 -16 -2
=> -19
,因此可能会删除太多数据,这会使你的 base64 字符串无效(例如,如果它的长度 / 4 留下 1 个余数)。
因此,如果您确实有一个有效的 dataURI,那么您只需要删除第二个参数:
function saveIMG(image) {
var startIndex = image.indexOf("base64,") + 7;
var b64 = image.substr(startIndex);
var byteCharacters = atob(b64);
var byteNumbers = new Array(byteCharacters.length);
for (var i = 0; i < byteCharacters.length; i++) {
byteNumbers[i] = byteCharacters.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
var data = new Blob([byteArray], {type: 'image/jpeg'});
return "<img src='" + window.URL.createObjectURL(data) + "' width='150'/>";
}
// a black 300x150px JPEG image
var dataURI = document.createElement('canvas').toDataURL('image/jpeg');
var imgStr = saveIMG(dataURI);
document.body.innerHTML = imgStr;