SecurityError：操作不安全。使用 Htmlcanvas答案

【问题标题】：SecurityError: The operation is insecure. using HtmlcanvasSecurityError：操作不安全。使用 Htmlcanvas
【发布时间】：2014-05-19 00:38:00
【问题描述】：

尝试将我 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);

【问题讨论】：

您正在使用来自另一个域的图像，从而导致画布受到污染。从同一个域加载图像，它应该可以工作。
@PeeHaa 谢谢你成功了！但是是否可以像我使用的那样使用另一个域（因为我是从 API url 绘制照片）来实现相同的预期目标？
如果其他域支持 CORS，您也许可以获取 base64 格式的图像并将 base64 字符串用作图像。您可以做的另一件事是使用一些后端语言来代理请求。
使用CORS and crossorigin = true
@Bergi 我会将它放在我的代码中的什么位置？

标签： javascript html canvas

【解决方案1】：

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

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

或使用 JavaScript：

var img = new Image;

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

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

【讨论】：