將圖像添加到畫布不允許將畫布保存爲圖像

-1

+第一個畫布有一個圓，當我點擊保存我可以將它保存爲圖像。

+第二個畫布有一個img，但是當我點擊保存時，我無法將它保存爲圖像。

我正在使用fabric.js。

爲什麼會發生這種情況？我如何將它保存爲圖像？

////- 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>

來源

2016-08-02 Norx

這是一個跨域腳本問題。您正在從twitter加載資源。它會工作，如果你加載本地資產。請注意控制檯中的「操作不安全」消息。

來源

2016-08-02 15:26:21

未捕獲SecurityError：未能在'HTMLCanvasElement'上執行'toDataURL'：受污染的畫布可能無法導出。 – Norx

在控制檯 – Norx

中得到了上面的錯誤，就像我說的，這是一個跨站點腳本問題，而且這個問題是重複的。谷歌第一次下一次的錯誤信息：http://stackoverflow.com/questions/20424279/canvas-todataurl-securityerror –

將圖像添加到畫布不允許將畫布保存爲圖像

回答

相關問題