Question

        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：无法在“窗口”上执行“ atob”：要解码的字符串未正确编码。

我只能假定这与base64有关，或者也许它不能使用atob转换base64图像。无论如何，这是从子字符串中获取的base64的开头：

/9j/4AAQSkZJRgABAQEASABIAAD/7RTuUGhvdG9zaG9wIDMuMAA4QklNBAQAAAAAAA8cAVoAAxslRxwCAAACAAAAOEJJTQQlAAAAAAAQzc/6fajHvgkFcHaurwXDTjhCSU0EOgAAAAAA5QAAABAAAAABAAAAAAALcHJpbnRPdXRwdXQAAAAFAAAAAFBzdFNib29sAQAAAABJbnRlZW51bQAAAABJbnRlAAAAAENscm0AAAAPcHJpbnRTaXh0ZWVuQml0Ym9vbAAA

Answer 1

从这里我想说你的问题在于第二个参数：

 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;

window.atob无法解码字符串并引发错误

1 个答案: