![](/img/trans.png)
[英]Javascript window.atob -> HEX - different result than expected
[英]window.atob fails to decode string and throws an error
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图像。 无论如何,这是从子字符串中获取的base64的开始:
/9j/4AAQSkZJRgABAQEASABIAAD/7RTuUGhvdG9zaG9wIDMuMAA4QklNBAQAAAAAAA8cAVoAAxslRxwCAAACAAAAOEJJTQQlAAAAAAAQzc/6fajHvgkFcHaurwXDTjhCSU0EOgAAAAAA5QAAABAAAAABAAAAAAALcHJpbnRPdXRwdXQAAAAFAAAAAFBzdFNib29sAQAAAABJbnRlZW51bQAAAABJbnRlAAAAAENscm0AAAAPcHJpbnRTaXh0ZWVuQml0Ym9vbAAA
从这里开始,我要说的是您的问题在于第二个参数:
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;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.