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

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

1 Answer 1

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;