How to download canvas as image, that includes drawImage()

Question

I can achieve to download canvas as png file, unless I use drawImage() function. I know that toDataURL() doesn't allow external images for security issues. But even I use local images hosted on the same server, it still doesn't work. None of the solutions I found around worked for me unfortunately.

    <img id="soundc_icon" src="http://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_(2011).png"/>
    <canvas width="500" height="300" id="canvas">Sorry, no canvas available</canvas>
    <a id="download">Download as .PNG</a>

    <script>
    var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d');
    var img = document.getElementById("soundc_icon");


    /**
     * Demonstrates how to download a canvas an image with a single
     * direct click on a link.
     */
    function doCanvas() {

        /* draw something */

        ctx.fillStyle = '#f90';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = '#fff';
        ctx.font = '60px Lucida Grande';
        ctx.fillText('Code Project', 10, canvas.height / 2 - 15);
        ctx.font = '26px Lucida Grande';
        ctx.fillText('Click link below to save this as image', 15, canvas.height / 2 + 35);

        //I WANTO TO INCLUDE THIS AND STILL BE ABLE TO DOWNLOAD
        //ctx.drawImage(img,10,10);

    }

    /**
     * This is the function that will take care of image extracting and
     * setting proper filename for the download.
     * IMPORTANT: Call it from within a onclick event.
     */
    function downloadCanvas(link, canvasId, filename) {
        link.href = document.getElementById(canvasId).toDataURL();
        link.download = filename;
    }

    /**
     * The event handler for the link's onclick event. We give THIS as a
     * parameter (=the link element), ID of the canvas and a filename.
     */
    document.getElementById('download').addEventListener('click', function() {
                                                         downloadCanvas(this, 'canvas', 'test.png');
                                                         }, false);

                                                         /**
                                                          * Draw something to canvas
                                                          */
    doCanvas();
        </script>

Answer 1

On the server

Configure your server to deliver cross domain images using headers that satisfy CORS restrictions:

http://enable-cors.org/

On the client

Load the image using the crossOrigin flag set to anonymous:

var img=new Image();
img.crossOrigin="anonymous";
img.onload=function(){
    ...
    ctx.drawImage(img,10,10);
}
img.src="yourImage.png";

If you want to test the client side before configuring your server, open a free account on dropbox.com and put your images in your public folder. Your public folder is CORS compliant.