1

I am trying to get base64 string representation of an image giving its URL.

HTML:

<input type="text" value="" id="urlFileUpload"/>
<input type="button" id="btn" value="GO" />

JS:

$('#btn').click(function()
{
    var img = new Image();
    img.src = $('#urlFileUpload').val();
    img.onload = function () 
    {
        var canvas = document.createElement("canvas");
        canvas.width = this.width;
        canvas.height = this.height;

        var ctx = canvas.getContext("2d");
        ctx.drawImage(this, 0, 0);

        console.log(canvas.toDataURL("image/png"));
    }
});

I get this error: Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

Here is a JSFiddle.

Arthur Rey
  • 2,990
  • 3
  • 19
  • 42

1 Answers1

0

Its because your local drive is considered as "other-domains" try uploading it to a web server it solved my issue

Nightraiser
  • 309
  • 1
  • 4
  • I don't understand why local drive is a problem. The file I'm trying to access is uploaded on the net. `$('#urlFileUpload').val();` is something like `http://someimage.com` – Arthur Rey Dec 10 '14 at 09:28