Convert local image to base64 string in Javascript

Question

I'm trying to convert a local image to Base64 string. I am not using any HTML and simply need javascript which references the image's path within the code.

For instance, converting:

C:\Users\Work\Desktop\TestImage.jpg

into

/9j/4AAQSkZJRgABAQEASABIAAD/4QBKRXhpZgAASUkqAAgAAAADABoBBQABAAAAMgAAABsBBQABAAAAOgAAACgBAwABAAAAAgAAAAAAAAAAVOoqgJaYAABU6iqAlpgA/+IMWElDQ19QUk9GSUxFAAEBAAAMSExpbm8CEAAAbW50clJHQiBYWVogB84AAgAJAAYAMQAAYWNzcE1TRlQAAAAASUVDIH.....etc...

There are many posts like this but they all seem to utilize HTML in some way, in order to identify the file path. I'm hoping I can write a defined filepath within the javascript.

I tried this to no avail:

function convertImgToBase64()
{
    var canvas = document.createElement('CANVAS');
    img = document.createElement('img'),
    img.src = C:\Users\Work\Desktop\TestImage.jpg;
    img.onload = function()
    {
        canvas.height = img.height;
        canvas.width = img.width;
        var dataURL = canvas.toDataURL('image/png');
        alert(dataURL);
        canvas = null; 
    };
}

One example has the following html and javascript, but I'm hoping this can be consolidated together. Thanks for your support

HTML:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>


<input type='file' id="asd" />
<br>
<img id="img" src="//placehold.it/1x1/" />
<div id="base"></div>
</body>
</html>

Javascript:

function el(id){return document.getElementById(id);} // Get elem by ID

function readImage() {
    if ( this.files && this.files[0] ) {
        var FR= new FileReader();
        FR.onload = function(e) {
             el("img").src = e.target.result;
             el("base").innerHTML = e.target.result;
        };       
        FR.readAsDataURL( this.files[0] );
    }
}

el("asd").addEventListener("change", readImage, false);\

Its demo found here

guest271314 · Accepted Answer · 2015-09-29 01:23:17Z

17

Try utilizing XMLHttpRequest() set responseType to Blob , use FileReader() at XMLHttpRequest onload event to read response as data URI

var xhr = new XMLHttpRequest();       
    xhr.open("GET", "/path/to/local/image/file", true); 
    xhr.responseType = "blob";
    xhr.onload = function (e) {
            console.log(this.response);
            var reader = new FileReader();
            reader.onload = function(event) {
               var res = event.target.result;
               console.log(res)
            }
            var file = this.response;
            reader.readAsDataURL(file)
    };
    xhr.send()

edited Sep 29, 2015 at 1:23

answered Sep 29, 2015 at 0:35

guest271314

1

Sign up to request clarification or add additional context in comments.

2 Comments

Wessam El Mahdy Over a year ago

This doesn't work for files referenced without being hosted on a sever, it will not work for the path mentioned above "C:\Users\Work\Desktop\TestImage.jpg" as Cross origin requests are only supported for protocol schemes such as http

guest271314 Over a year ago

@WessamElMahdy See stackoverflow.com/questions/32996001/…, stackoverflow.com/questions/41279589/read-local-xml-with-js

Collectives™ on Stack Overflow

Convert local image to base64 string in Javascript

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related