4

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.

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!

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);
Amechi
  • 742
  • 3
  • 11
  • 32
  • 2
    You are using images from another domain resulting in a tainted canvas. Load images from the same domain and it should work. – PeeHaa Apr 06 '14 at 23:06
  • @PeeHaa Thank you it worked! But is it possible to use another domain as I was using(since I was drawing the photos from and API url) to accomplish the same desired goal? – Amechi Apr 06 '14 at 23:14
  • If the other domain supports CORS you might be able to get the image in base64 and use the base64 string as image. Another thing you could do is use some back end language to proxy the requests. – PeeHaa Apr 06 '14 at 23:15
  • Use [CORS and `crossorigin = true`](https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image) – Bergi Apr 06 '14 at 23:31
  • @Bergi Where would I put that in my code? – Amechi Apr 06 '14 at 23:38
  • before the `imageObj.src = …` you set `imageObj.crossOrigin = "Anonymous";` - notice that the other domain server needs to support CORS – Bergi Apr 06 '14 at 23:44

1 Answers1

12

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

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

or using JavaScript:

var img = new Image;

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

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.