javascript - SecurityError: The operation is insecure. using Htmlcanvas -


trying convert images drag , place on canvas element png or jpeg photo (sort of moodboard concept polyvore) can view images place on canvas @ once in 1 png or jpeg photo. can save or whatever photo.

but run securityerror: operation insecure. when press save , try convert data show saved image myself using .alert() method. ideas how can past error accomplish goal? thank you!

here link project view 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 shape layer     layer.add(new_image);      // add layer stage     stage.add(layer);   }; }  //saving 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); 

to request image using cors can either specify usage in 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 no guarantee - server support cors or not. if doesn't need move image same server (origin) page or server support cors.


Comments

Popular posts from this blog

Change the color of an oval at click in Java AWT -

c# - Unity IoC Lifetime per HttpRequest for UserStore -

I am trying to solve the error message 'incompatible ranks 0 and 1 in assignment' in a fortran 95 program. -