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, Mar 05 '12 at 09:28
ofcourse, same html file showing base64 string clearly , but when placed on iis , its not showing, why? — Raja Ramesh, Mar 05 '12 at 09:31
That will not work I'm afraid. I'm surprised it works locally. What browser are you using? — Pekka, Mar 05 '12 at 09:33
possible duplicate of [base64 javascript not running on iis, in some browsers too, why?](http://stackoverflow.com/questions/9544814/base64-javascript-not-running-on-iis-in-some-browsers-too-why) — rene, Aug 09 '12 at 19:38

score 1 · Answer 1 · edited May 23 '17 at 12:15

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 '17 at 12:15

Community

1
1

answered Mar 05 '12 at 09:35

Pekka

442,112
142
972
1,088

HOW CAN WE RESOLVE OUR ISSUE? PLEASE HELP ME – Raja Ramesh Mar 05 '12 at 10:50
@Raja see the link in the answer. You'll need to use a slightly different concept here. – Pekka Mar 05 '12 at 10:52
iam sorry, i unable to do, and its for mozilla, not working on IE – Raja Ramesh Mar 06 '12 at 03:09
@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 – Pekka Mar 06 '12 at 12:24

Converting a local image to base64 using JavaScript

1 Answers1