SecurityError：操作不安全。使用Htmlcanvas [英] SecurityError: The operation is insecure. using Htmlcanvas

问题描述

尝试转换图像我拖动并将我的画布元素放入PNG或Jpeg照片（类似于polyvore的情绪板概念），这样我就可以查看图像了在一张PNG或Jpeg照片中一次性放置在画布上。所以我可以保存它或对照片做任何事情。

Trying to convert images I drag and place on my canvas element into a PNG or Jpeg photo (sort of a moodboard concept like polyvore) so I can view the images I place on the canvas all at once in one PNG or Jpeg photo. So I can save it or do whatever with the photo.

但是我遇到了一个SecurityError：操作不安全。当我按下保存并尝试转换数据以使用.alert（）方法实际显示保存的图像给自己。我有什么想法可以通过这个错误来实现目标？谢谢！

But I run into a SecurityError: The operation is insecure. when I press save and try convert the data to actually show the saved image to myself using the .alert() method. Any ideas how I can get past this error to accomplish the goal? Thank You!

这是我的项目链接，可以直播： http://amechi101.github.io/moodboard/

Here is a link to my project to view it live: 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请求图像，您可以指定用法在图片标记中：

To request an image using CORS you can either specify usage in the image tag:

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

或使用JavaScript：

or using JavaScript:

var img = new Image;

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

请求无法保证 - 服务器是否支持CORS。如果不是，则需要将图像移动到与页面相同的服务器（源）或支持CORS的另一台服务器。

A request is no guarantee however - It will be up to the server to support CORS or not. If it doesn't you need to move the image to the same server (origin) as the page or to another server which do support CORS.

这篇关于SecurityError：操作不安全。使用Htmlcanvas的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！