安全错误：操作不安全。使用Htmlcanvas

Question

尝试将我拖放到画布元素上的图像转换为PNG或Jpeg照片（类似于polyvore的情绪板概念），以便我可以在一个PNG或Jpeg照片中同时查看我放置在画布上的所有图像。这样我就可以保存它或对照片进行任何操作。

但是，当我按保存并尝试使用.alert()方法将数据转换为实际显示保存的图像时，会遇到SecurityError：操作不安全。您有什么想法如何克服此错误以实现目标？谢谢！

这是我的项目链接，以便查看实时效果：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);

- Amechi

---

您正在使用来自另一个域的图像，导致画布被污染。请从相同的域加载图像，这样它应该可以正常工作。 - PeeHaa

@PeeHaa 谢谢，它起作用了！但是是否可能使用另一个域名来实现相同的目标（因为我正在从API URL中获取照片）？ - Amechi

如果另一个域支持CORS，您可能可以获取base64格式的图像，并将其作为图像使用。您还可以使用一些后端语言来代理请求。 - PeeHaa

使用CORSå’Œcrossorigin = true - Bergi

@Bergi 我应该把它放在我的代码哪里？ - Amechi

在 imageObj.src = … 之前，您需要设置 imageObj.crossOrigin = "Anonymous"; - 请注意其他域服务器需要支持CORS。 - Bergi

Answer 1

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

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

或者使用JavaScript：

var img = new Image;

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

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

- user1693593