How to convert an image to base64 in JavaScript

Question

I'm trying to write a file upload script for use in a secure corporate intranet and having just a little trouble...

In the following code, I get no errors and all my debugging looks like everything is working, but the end result is always a 'blank' image:

var ctx = document.createElement('canvas'); var img = new Image(); img.onload = function(){ ctx.drawImage(img,0,0); } img.src = $('#UpdateImage:file'); var imgStr = ctx.toDataURL("image/png", ""); document.getElementById("Item_Create_Image_Avatar").src = imgStr;

When I "inspect element" on the 'Item_Create_Image_Avatar' object, the 'src' value looks absolutely perfect:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAEYklEQVR4Xu3UAQkAAAwCwdm/9HI83BLIOdw5AgQIRAQWySkmAQIEzmB5AgIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlACBB1YxAJfjJb2jAAAAAElFTkSuQmCC" id="Item_Create_Image_Avatar" style="vertical-align:top">

Why is my image coming in as blank?

I think the problem is with setting the 'src' of the 'img' to a file: img.src = $('#UpdateImage:file'); Then converting that to a 'dataURL' is giving me a base64 string that always shows as blank because it's not using the actual image info... — Nicolai Dutka
– Nicolai Dutka, Commented Oct 29, 2013 at 14:29
possible duplicate of How to convert image into base64 string using javascript — HaNdTriX
– HaNdTriX, Commented Mar 8, 2014 at 22:21
Regarding @HaNdTriX link look at his function he wrote, which seems to work great. Image to Base64 — WASasquatch
– WASasquatch, Commented Apr 21, 2014 at 6:20

Community · Accepted Answer · 2017-05-23 12:17:02Z

Found This.

Select a File to Load: <input id="inputFileToLoad" type="file" onchange="loadImageFileAsURL();" /> <div id="imgTest"></div> <script type='text/javascript'> function loadImageFileAsURL(){ var filesSelected = document.getElementById("inputFileToLoad").files; if (filesSelected.length > 0){ var fileToLoad = filesSelected[0]; var fileReader = new FileReader(); fileReader.onload = function(fileLoadedEvent) { var srcData = fileLoadedEvent.target.result; // <--- data: base64 var divTest = document.getElementById("imgTest"); var newImage = document.createElement('img'); newImage.src = srcData; divTest.innerHTML = newImage.outerHTML; } fileReader.readAsDataURL(fileToLoad); } } </script>

EDIT:

Source: How to convert image into base64 string using javascript

Edited a line of your code, since it was having issue with var declaration for document.getElementById("imgTest").innerHTML.. Its now working like a charm... :)

devnull69 · Accepted Answer · 2014-04-21 06:14:04Z

If you want to get the Data URL of the image after it loaded, you should get the Data URL after it loaded

var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); var img = new Image(); img.onload = function() { ctx.drawImage(img, 0, 0); imgStr = canvas.toDataURL("image/png", ""); document.getElementById("Item_Create_Image_Avatar").src = imgStr; } img.src = $('#UpdateImage:file');

EDIT: Included the rest of the code EDIT2: Edited stupid error regarding canvas and its context

This doesn't work... Now instead of a blank image, I get nothing at all. The image doesn't change in the slightest bit and inspecting the element reveals the 'src' is not getting updated.
I hope you just replace the .onload part of your original code? The rest of your code should remain unchanged. Answer edited accordingly ...
document.createElement('canvas') will return canvas, not context

Collectives™ on Stack Overflow

How to convert an image to base64 in JavaScript

2 Answers 2

1 Comment

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Linked

Related