Base64 - Invalid Encoding

Question

I try to convert my image binary to base64 using this code but still not successful.

I got invalid base64 string. Verify using this tool.

http://www.freeformatter.com/base64-encoder.html

var img = document.getElementById('image'); function getBase64Image(img) { var canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.height; var ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0); var dataURL = canvas.toDataURL("image/png"); return dataURL.replace(/^data:image\/(png|jpg);base64,/, ""); }

These solutions did not help me:

Result iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAADKUlEQVR4Ae3QMQEAAADCoPVPbQhfiEBhwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBg4B0Yv9QAAQ+mdHoAAAAASUVORK5CYII=

What is 'not successful' - is it erroring, giving an invalid base64 string, or something else? — Adrian Wragg
– Adrian Wragg, Commented May 22, 2014 at 7:57
I don't think you can just remove the data:image part. Try just returning the dataURL before the replace. — Luka Horvat
– Luka Horvat, Commented May 22, 2014 at 8:09
@Dato'MohammadNurdin Can you post the base64 string that you're getting (before the replace on the last line)? — Adrian Wragg
– Adrian Wragg, Commented May 22, 2014 at 8:51

Nurdin · Accepted Answer · 2014-06-02 09:26:29Z

I got the answer.

var img = document.getElementById('image'); var oReq = new XMLHttpRequest(); oReq.open("GET", img, true); oReq.responseType = "arraybuffer"; oReq.onload = function (oEvent) { var arrayBuffer = oReq.response; // Note: not oReq.responseText if (arrayBuffer) { var x = img.split('.'); var ext = x[x.length - 1]; var b64img = _arrayBufferToBase64(arrayBuffer); $('<img />').attr('src', 'data:image/' + ext + ';base64,' + b64img).appendTo($('body')); } }; oReq.send(null); function _arrayBufferToBase64(buffer) { var binary = '' var bytes = new Uint8Array(buffer) var len = bytes.byteLength; for (var i = 0; i < len; i++) { binary += String.fromCharCode(bytes[i]) } return window.btoa(binary); }

Collectives™ on Stack Overflow

Base64 - Invalid Encoding

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related