javascript - window.atob fails to decode string and throws an error - Stack Overflow

admin管理员组

文章数量:1410697

        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'/>";
        }

I wanted to use this code to encode a base64 image into an image with uses a URL. However, on the line where it uses atob it throws this error:

Uncaught DOMException: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.

I can only assume it is something to do with the base64, or perhaps it cannot convert base64 images using atob. Anyhow, here is the start of the base64 that was taken from the substring:

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

        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'/>";
        }

I wanted to use this code to encode a base64 image into an image with uses a URL. However, on the line where it uses atob it throws this error:

Uncaught DOMException: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.

I can only assume it is something to do with the base64, or perhaps it cannot convert base64 images using atob. Anyhow, here is the start of the base64 that was taken from the substring:

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

• javascript
• arrays
• base64
• blob

Share Improve this question Follow asked Oct 22, 2018 at 12:54 12Mb12Mb 7511 gold badge22 silver badges99 bronze badges 1

• Where did you got this image.indexOf('>') from? – Kaiido Commented Oct 22, 2018 at 13:07

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

From here I'd say your problem is in substr second param:

 image.indexOf(">") - startIndex - 2

While the remaining of your code points toward a normal dataURI, this part implies the presence of a character that would not be valid in there (>).

So I strongly suspect that the value of this second param be -1 -16 -2 => -19 and thus probably removing too much data which would make your base64 string invalid (e.g if it's length / 4 leaves 1 remainder).

So if you really have a valid dataURI, then all you need is to remove this second argument:

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;

本文标签： javascriptwindowatob fails to decode string and throws an errorStack Overflow