Как загрузить холст как изображение, которое включает 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/

На клиенте

нагрузки изображение usin г crossOrigin флаг установлен анонимный:

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

Если вы хотите проверить на стороне клиента перед настройкой сервера, откройте бесплатную учетную запись на dropbox.com и поместить изображения в вашей общей папке. Ваша общая папка совместима с CORS.