在Javascript中，将图像转换为画布，再将画布转换回图像是不可能的吗？

Question

我能否使用Javascript将图像转换为画布，反之亦然？

我想将图像转换为画布，在画布上绘制一些内容，然后再将画布转换回图像。

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

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

当我将画布转换为图像时，它失败了。

安全错误：操作不安全。

图片正在从服务器提供。

这种方式是错误的吗？是否不可能？

- R.Atim

---

是的，这是可能的，但你必须了解跨域资源共享（CORS）和同源策略。 - undefined

谢谢。我尝试启用CORS的图像和Access-Control-Allow-Origin。 - undefined

Answer 1

问题已解决。谢谢dystroy。 .htaccess

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

Javascript

将图片转换为画布（Canvas）

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);
        };
};

将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
};

- R.Atim

---

请标记您的答案为已接受。即使它是重复的，这样会更清晰。并且+1 是为了努力构建一个整洁的答案，这可能会帮助其他用户。 - undefined

现在似乎无法接受。如果时间过去了，我会接受的。谢谢。 - undefined