将图像转换为画布，并且在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 
};