將圖像轉換爲畫布，並且在Javascript中畫布再次轉換爲圖像是不可能的？

Question

我可以使用Javascript將圖像轉換爲畫布，反之亦然？

我想將圖像轉換爲畫布，在畫布上繪製某些內容，然後再將畫布轉換爲圖像。

var canvas = document.getElementById("CANVAS"), 
    img = new Image(); 

    img.src = canvas.toDataURL(); //=> Error is occurred at this point. 
    img.onload = function(){ 
     // ... 
    }; 

當我將畫布轉換爲圖像時，它失敗。

SecurityError: The operation is insecure.

這張照片是從服務器提供的。

方式錯了嗎？這是不可能的嗎？

Answer 1

問題已解決。謝謝你的失敗。

的.htaccess

Header set Access-Control-Allow-Origin http://mysite-domain #=> The point of solution 

的JavaScript

將圖像轉換爲帆布

this.imageToCanvas = function() 
{ 
    var self = this, 
     img = new Image(); 

     img.src   = document.getElementById("IMAGE").src; 
     img.crossOrigin = "anonymous"; //=> The point of solution 
     img.onload  = function(){ 
      var canvas = document.getElementById("CANVAS"); 

      if (! canvas || ! canvas.getContext) { return false; } 

      var ctx = canvas.getContext('2d'); 
       ctx.drawImage(img, 0, 0, img.width, img.height); 

      self.draw(); 
     }; 
}; 

畫東西在畫布上

this.draw = function() 
{ 
    var self = this, 
     text = "stackoverflow", 
     img = new Image(); 

     img.crossOrigin = "anonymous"; //=> The point of solution 
     img.src   = document.getElementById("SECOND-IMAGE").src; 
     img.onload  = function(){ 
      var canvas = document.getElementById("CANVAS"); 

      if (! canvas || ! canvas.getContext) { return false; } 

      var ctx = canvas.getContext('2d'); 
       ctx.drawImage(img, 10, 10, img.width, img.height); 

       ctx.save(); 
       ctx.font  = "italic bold 32px 'Times New Roman'";; 
       ctx.fillStyle = "#0067ef"; 
       ctx.fillText(text, 50, 50); 
       ctx.restore(); 

       self.canvasToImage(canvas); 
     }; 
}; 

轉換畫布回的圖像再次

this.canvasToImage = function(_canvas) 
{ 
    var img  = new Image(); 
     img.id = "IMAGE"; 
     img.src = _canvas.toDataURL(); //=> It succeeds this time. 

    $("#" + _canvas.id).replaceWith(img); //=> with jQuery 
};