如何在包含圖像作爲對象的情況下拍攝HTML5畫布

我製作了畫布併爲其添加了不同的對象，如圖像，剪貼畫和文字。當它只包含文本時使用canvas.toDataURL（）方法捕捉畫布時，它會給我正確的捕捉。但是當我將圖像添加到畫布時，它將返回一個空白頁面。如何在包含圖像作爲對象的情況下拍攝HTML5畫布

我的代碼如下：

canInstance.discardActiveObject(); 

drawCanvas.loadFromJSON(json,function(){ 
    var img = drawCanvas.toDataURL("png"); 
    $("#previewPopUp").append("<img src='"+ img +"'/>"); 
});

我使用fabricjs。任何人都可以告訴如何在包含圖像的情況下拍攝畫布？

來源

2014-02-07 Shaun

[Canvas by cross-origin data]可能的重複]（http://stackoverflow.com/questions/13674835/canvas-tainted-by-cross-origin-data） – Philipp

它不起作用的最可能原因是因爲您從不同於HTML託管位置的域加載圖像。只要您這樣做，畫布就會「受到交叉來源數據的污染」，並且某些允許讀取畫布內容的功能將變得不可用。

這是一項安全功能，可防止Web開發人員訪問僅允許用戶訪問的圖像。

作爲解決方法，將圖像複製到相同的域，或者當您控制從中加載圖像的域時，通過在網絡服務器的設置中啓用Cross-Origin Resource Sharing，將您的HTML列入白名單。

來源

2014-02-07 08:32:48 Philipp

是否有任何其他方式的畫布快照....？ – Shaun

@Shaun不是當你在畫布上存在跨源數據時（當存在時，這是一個安全漏洞，應該由Web瀏覽器的開發者修復） – Philipp

Philipp @謝謝你的寶貴答案。 – Shaun

如何在包含圖像作爲對象的情況下拍攝HTML5畫布

回答

相關問題