如何将画布下载为图像，包括 drawImage()

Question

我可以实现将画布下载为 png 文件，除非我使用 drawImage() 函数。我知道 toDataURL() 不允许使用外部图像来解决安全问题。但即使我使用托管在同一台服务器上的本地图像，它仍然无法正常工作。不幸的是，我发现的所有解决方案都不适合我。

    <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

在服务器上

将您的服务器配置为使用满足 CORS 限制的标头传递跨域图像：

http://enable-cors.org/

在客户端

使用设置为匿名的 crossOrigin 标志加载图像：

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

如果您想在配置服务器之前测试客户端，请在 dropbox.com 上开设一个免费帐户并将您的图片放入您的公共文件夹中。您的公用文件夹符合 CORS。