javascript - 当图像位于同一域时，Canvas 元素未呈现为 PNG(安全错误)

Question

我有两个 Canvas :

· 第一个是我要导出的 Canvas ，它包含一个图案作为背景(通过 js 填充)和一些用户将通过单击 Canvas 放置的图像。

· 第二个位于第一个之上，用作将粘贴到第一个 Canvas 上的图像的一种“预览”。

简而言之:通过在第二个 Canvas 上移动鼠标，我可以看到要粘贴的图像的预览，而通过单击(再次在第二个 Canvas 上)，我将解析第一个 Canvas 上的图像。

忽略可能不是问题的 HTML 代码，我的脚本是这个:

 $(window).ready(function(){
    $(document).ready(function(){
        $('myCanvas').ready(function(){
            canvasObject = new canvasElement ('myCanvas','2d');
            canvasObject.initSea();
            canvasLayer1 = new canvasElement ('myCanvas2','2d');

            $('#myCanvas2').on("click",function(mouseClickEvent){
                $(this).off('mousemove');
                var position = canvasLayer1.getMouseCoordinates(mouseClickEvent);
                canvasObject.parseImage('elements/objects/wooden_turrets.png',(position.x),(position.y));
            });

            $('#myCanvas2').on("mousemove",function(mouseMoveEvent){
                canvasLayer1.reset();
                var currentPos = canvasLayer1.getMouseCoordinates(mouseMoveEvent);
                canvasLayer1.parseImage('elements/objects/wooden_turrets.png',(currentPos.x),(currentPos.y));
            });

            $('#render').click(function() {
                canvasObject.renderSVG();
            });
        });
    });
});

function canvasElement (id, context){
    this.id = id;
    this.canvas = document.getElementById(id);
    this.context = this.canvas.getContext(context);
}

canvasElement.prototype.parseImage = function (imgurl, x, y) {
    tmpContext = this.context;
    var imgObject = new Image();
    imgObject.onload = function() {
        tmpContext.drawImage(imgObject, x, y);
    };
    imgObject.src = imgurl;
};

canvasElement.prototype.reset = function () {
    tmpContext = this.context;
    // tmpContext.setTransform(1, 0, 0, 1, 0, 0);
    tmpContext.clearRect(0, 0, this.canvas.width, this.canvas.height);
};

canvasElement.prototype.getMouseCoordinates = function (mouseEvent) {
    var area = this.canvas.getBoundingClientRect();
    return {
        x: mouseEvent.clientX - area.left,
        y: mouseEvent.clientY - area.top
    };
};

canvasElement.prototype.initSea = function () {
    var tmpCanvas = this.canvas;
    var tmpContext = this.context;
    var seaImg = new Image();
    seaImg.src = 'elements/land/water.png';
    seaImg.onload = function () {
        var pattern = tmpContext.createPattern(seaImg,"repeat");
        tmpContext.rect(0,0,tmpCanvas.width,tmpCanvas.height);
        tmpContext.fillStyle = pattern;
        tmpContext.fill();
    }

    console.log('filling');
};

canvasElement.prototype.renderSVG = function () {
    var imgObject = this.canvas.toDataURL("image/png");
    window.location = imgObject;
};

现在，一切都很好并且运行良好，但是每当我调用引用 Canvas 方法 toDataURL("image/png"); 的方法 renderSVG() 时，我都会收到此错误:

Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

现在，我检查了几个与我类似的问题，例如:

这个:toDataURL throw Uncaught Security exception这个:Get security error when saving canvas object into an image

但我不明白为什么它会抛出安全错误，因为图像在我的域中(在本例中为本地)，而不是在任何其他域中。

所以问题是:

1) 为什么会这样？由于图像与 Canvas 位于同一域中，它不应该毫无问题地导出吗？

2) 我一直在想，也许使用一些库(例如 fabric.js)会对我有所帮助，因为我已经看到了很多舒适的功能，但即使使用其中任何一个也会出现同样的错误吗？

3) 有什么办法可以避免这个问题吗？

谢谢。

Answer 1

你的本地硬盘驱动器被认为是跨域的，你的 Canvas 被污染了。

这可能看起来有点严格，但您的本地硬盘可能是您最敏感数据所在的地方。

临时修复 #1:将图像和您的网页 html 移动到桌面。

临时修复 #2:如果这不起作用，请临时托管:

• 在 dropbox.com 上开设一个免费帐户
• 将您的图片放在您帐户的公共(public)文件夹中
• 右键单击并获取图像的公共(public)链接，并在您的应用中使用该公共(public)链接
• 加载图片时，设置crossOrigin标志为“anonymous”

确定修复:

在同一个网络服务器上托管您的图片和完整的网络应用。

为了测试，您可以根据您的操作系统安装本地版本的 PHP 服务器或 IIS 服务器。