Das Hinzufügen eines Bildes zu einer Arbeitsfläche erlaubt es nicht, Leinwand als Bild zu speichern

Question

Ich habe 2 Leinwand Beispiel in meinem Fiddle.

+ Erste Leinwand hat einen Kreis und wenn ich auf Speichern klicke, kann ich es als Bild speichern.

+ Zweite Leinwand hat ein IMG, aber wenn ich auf Speichern klicke, kann ich es nicht als Bild speichern.

Ich benutze fabric.js.

Warum das passiert? Wie kann ich es als Bild speichern?

////- First Canvas -///// 
 
var canvas1 = new fabric.Canvas('first'); 
 

 
//Added circle to first canvas 
 
var circle = new fabric.Circle({ 
 
    left: 20, 
 
    top: 10, 
 
    radius: 50, 
 
    fill: "#299b71" 
 
}); 
 
canvas1.add(circle); 
 

 
$("#save-first").click(function() { 
 
    window.open(canvas1.toDataURL('png')); 
 
}); 
 

 
////- Second Canvas -///// 
 

 
var canvas2 = new fabric.Canvas('second'); 
 

 
//Added img to second canvas 
 
fabric.Image.fromURL("http://www.socialmediatoday.com/sites/default/files/post_main_images/alltwitter-twitter-bird-logo-white-on-blue_9.png", function(oImg) { 
 
    canvas2.add(oImg); 
 
}); 
 

 
$("#save-second").click(function() { 
 
    window.open(canvas2.toDataURL('png')); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.3/fabric.min.js"></script> 
 
<canvas id="first" width="300" height="200"></canvas> 
 
<button id="save-first">Save as img</button> 
 

 
<canvas id="second" width="300" height="200"></canvas> 
 
<button id="save-second">Save as img</button>

Answer 1

Es ist ein Cross-Domain-Scripting-Problem. Sie laden Assets von Twitter. Es wird funktionieren, wenn Sie lokale Assets laden. Beachten Sie die Meldung "Vorgang ist nicht sicher" in der Konsole.