Canvas 如何下载画布作为图像，包括drawImage（）

我可以实现下载画布作为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>

对不起，没有画布
下载为.PNG
var canvas=document.getElementById（'canvas'），
ctx=canvas.getContext（'2d'）；
var img=document.getElementById（“声音图标”）；
/**
*演示如何使用单个
*直接点击链接。
*/
函数doCanvas（）{
/*画点东西*/
ctx.fillStyle='#f90'；
ctx.fillRect（0，0，canvas.width，canvas.height）；
ctx.fillStyle='#fff'；
ctx.font='60px Lucida Grande'；
ctx.fillText（“代码项目”，10，canvas.height/2-15）；
ctx.font='26px Lucida Grande'；
ctx.fillText（'单击下面的链接将此保存为图像'，15，canvas.height/2+35）；
//我想包括这一点，仍然能够下载
//ctx.drawImage（img，10,10）；
}
/**
*这是一个函数，将负责图像提取和处理
*为下载设置正确的文件名。
*重要提示：从onclick事件中调用它。
*/
函数downloadCanvas（链接、canvasId、文件名）{
link.href=document.getElementById（canvasId.toDataURL（）；
link.download=文件名；
}
/**
*链接的onclick事件的事件处理程序。我们把这个作为一个例子
*参数（=链接元素）、画布ID和文件名。
*/
document.getElementById（'download'）.addEventListener（'click'，function（）{
下载画布（这是“canvas”、“test.png”）；
}，假）；
/**
*把某物画到画布上
*/
doCanvas（）；
服务器上的

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

在客户端上

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

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

---

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

谢谢您的建议。但当我尝试使用源代码（dropbox中的公共链接）时，仍然无法将其与现有代码集成。我不知道哪个部分不起作用，因为浏览器也不让我看到错误。请查看这个半有用的链接：希望dropbox在公开时没有删除公共链接功能——这是他们服务最好的部分！