Converting a local image to base64 using JavaScript

Question

Iam doing a project in html, javascript only. I have a function that convert image to base64, see the code below.

function getBase64Image()
{
    p = document.getElementById("picField").value;
    img.setAttribute('src', p);
    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");
    var r = dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
    base64 = r;
    alert(base64);
}

but the problem is when I deployed my website, means when I placed my html file on iis, its not working, means in local file system it is showing complete base 64 format like iVb...., but on iis it giving base64 code as just "base,". so why it is not working on iis i dont know, so please help me and send me html file that will work on iis too.

This is client side code and shouldn't have anything to do with IIS. You probably have a Same Origin Policy problem. What kind of a field is document.getElementById("picField") and what does the URL look like that is in it? — Pekka
– Pekka, Commented Mar 5, 2012 at 9:28
ofcourse, same html file showing base64 string clearly , but when placed on iis , its not showing, why? — Raja Ramesh
– Raja Ramesh, Commented Mar 5, 2012 at 9:31
That will not work I'm afraid. I'm surprised it works locally. What browser are you using? — Pekka
– Pekka, Commented Mar 5, 2012 at 9:33
possible duplicate of base64 javascript not running on iis, in some browsers too, why? — rene
– rene, Commented Aug 9, 2012 at 19:38

Community · Accepted Answer · 2017-05-23 12:15:30Z

1

I'm fairly sure you have a Same Origin Policy problem.

When you run your page on IIS, it runs in a different context than locally: Instead of a file:// URL, it runs on a http:// one.

What you are trying to do is fetch a local image file and load it into a canvas on a remote site. That is not possible using traditional JavaScript for security reasons. (I'm not sure how this works even locally - in my understanding, it shouldn't. But anyway.)

You will need to use the HTML 5 file API which allows JavaScript direct access to local files. I'll look whether I can dig up some related SO questions.

Update: this should help:

How can I draw an image from the HTML5 File API on Canvas?

edited May 23, 2017 at 12:15

CommunityBot

11 silver badge

answered Mar 5, 2012 at 9:35

Pekka

451k150 gold badges989 silver badges1.1k bronze badges

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

4 Comments

Raja Ramesh Over a year ago

HOW CAN WE RESOLVE OUR ISSUE? PLEASE HELP ME

Pekka Over a year ago

@Raja see the link in the answer. You'll need to use a slightly different concept here.

Raja Ramesh Over a year ago

iam sorry, i unable to do, and its for mozilla, not working on IE

Pekka Over a year ago

@Raja yeah, it won't work in IE yet. Maybe in IE10... You'd have to serve one version in IE, and the other in Firefox/Chrome. I don't have any hands-on experience with this so I can't help any further, I don't have the time to try this out myself right now

Collectives™ on Stack Overflow

Converting a local image to base64 using JavaScript

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related