Question

I’m attempting to use HTML5 to bring in an image file, draw it to the canvas, do some manipulation of it, then return the dataURL so that I can reference this newly generated image.

Here’s a quick example of what the image loading code looks like:

<canvas id="myCanvas" style="border:1px solid #c3c3c3;">
    Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">
    c = document.getElementById("myCanvas");
    cxt = c.getContext("2d");

    var img=new Image();
    img.src = "http://www.google.com/images/srpr/logo3w.png";
    //img.src = 'image/placemark.png';
    img.onload = function() {
        cxt.drawImage(img, 0, 0);
    }

    console.log(c.toDataURL());
</script>

So, with the code like that the log of c.toDataURL() is a blank canvas, presumably because the log() call is executed before the draw() function finishes. If instead, I move that log call inside draw() I get a JavaScript error: SecurityError: The operation is insecure

If instead, I use the local image and put the log in to the draw function, I get the expected output there – but still blank canvas outside the function

I guess my actual question is: how can load in an external image to a canvas, and then modify it’s contents in some fashion?

Answer 1

Cross origin needs to be set on the server hosting the image making it a CORS enabled image if you want to do any sort of image modification.

If this is not set on the server side the only other option is to download the image via a server side proxy on the same domain as your script. As long as the image is coming from the same domain you’ll be able to modify it.