SecurityError：操作不安全。使用 Htmlcanvas [重复]

尝试转换图像我drag并将我的画布元素放入 PNG 或 Jpeg 照片中（有点类似于 Polyvore 的情绪板概念），这样我就可以在一张 PNG 或 Jpeg 照片中一次性查看放置在画布上的所有图像。这样我就可以保存它或对照片进行任何操作。

但我遇到了 SecurityError: 该操作不安全。当我按下“保存”并尝试使用 .alert() 方法转换数据以实际向自己显示保存的图像时。我有什么想法可以克服这个错误来实现目标吗？谢谢你！

这是我的项目的链接，可以实时查看：http://amechi101.github.io/moodboard/

Html:

 <div id="container" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
 <div class="buttonMoodBoard">
    <button class="btn btn-primary btn-lg" id="save">Save Moodboard</button> 
 </div>

JavaScript：

var stage = new Kinetic.Stage({
                container: 'container',
                width: 500,
                height:500
            });

            var layer = new Kinetic.Layer();

uni_width = 120;

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("Text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    data = ev.dataTransfer.getData("Text");
    img_received = document.getElementById(data);
    ratio = img_received.height / img_received.width;

    var c=document.getElementById("container");
    drop_x=ev.pageX-c.offsetLeft;
    drop_y=ev.pageY-c.offsetTop;

    var imageObj = new Image();
    imageObj.src = img_received.src;
    imageObj.onload = function() {
        var new_image = new Kinetic.Image({
        x: drop_x - uni_width / 2,
        y: drop_y - uni_width * ratio / 2,
        image: imageObj,
        width: uni_width,
        height: uni_width * ratio,
        draggable: true
        });

    // add the shape to the layer
    layer.add(new_image);

    // add the layer to the stage
    stage.add(layer);
  };
}

//saving to data base via Json
document.getElementById('save').addEventListener('click', function (canvas) {
        var json = stage.toJSON();



    var canvas = document.getElementsByTagName("canvas");
    var img    = canvas[0].toDataURL("image/png");

    var alertJson = alert(img);
    console.log(json, alertJson);   
}, false);

要使用 CORS 请求图像，您可以在图像标签中指定用法：

<img src="..." crossOrigin="anonymous">

或使用 JavaScript：

var img = new Image;

img.onload = loaded;            // load handler
img.crossOrigin = 'anonymous';
img.src = '...';

然而，请求并不能保证——服务器是否支持 CORS 将取决于服务器。如果没有，您需要将图像移动到与页面相同的服务器（源）或另一个支持 CORS 的服务器。