2015-10-15 98 views
5

我需要從fabric.jsFabric.js直接從JSON去PNG

我有我現在的儲蓄從畫布到JSON數據的數據庫中創建並保存字符串化JSON的PNG縮略圖,但我需要創建來自保存的JSON數據的PNG縮略圖庫。

而不是在頁面上創建一堆畫布並執行類似的操作。

canvas.loadFromJSON(JSONDATA); 
thumbImage = canvas.toDataURL('png'); 
$(this).attr('src', thumbImage); 

我需要直接從JSON數據創建PNG。這是可能的,如果是這樣,我該怎麼做?

回答

2

JSON數據是FabricJS用於創建畫布的一組指令。然後可以將畫布轉換爲圖像。

出於這個原因,是的,你需要創建畫布,然後創建圖像。

另一種方法是創建一個運行NodeJS的服務器,它可以運行FabricJS。最終你會在那裏執行相同的任務 - 創建一個畫布,然後生成圖像。但是,這樣做的好處是,它是一個服務器進程,它將文件直接保存到服務器,因此可以自動執行此任務。

但是,設置服務器並編寫腳本來執行此任務可能需要比您的任務需要更多的努力 - 取決於您需要多久執行一次此操作。

This post discusses how to install NodeJS and FabricJS。這將使服務器啓動並運行,但是您還需要編寫服務器腳本。

2

你有另一種替代方法是創建一個生成畫布,並給它一個沒有顯示,創建一個隱藏的畫布來生成你的PNG,就像你可以從隱藏的內容畫布生成圖像。

<canvas id='c' width='150' heigh='150' style='display: none;'><canvas> 

<script> 
    var canvas = new fabric.Canvas('c'); 
    canvas.loadFromJSON(json); 
    canvas.toDataURL('png'); 
</script>