Fabric.jsは、私は私がキャンバスからJSONデータを保存していたデータベースを持っていますが、私が作成する必要がJSONからPNG

Question

に直接私がfabric.js

から保存された文字列化JSONのPNGのサムネイルを作成する必要が

を行きますこの保存されたJSONデータからのPNGサムネイルギャラリー。

ページ上に多数のキャンバスを作成し、このようなことを行うのではなく、

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

JSONデータから直接PNGを作成する必要があります。これは可能ですか？どうすればいいですか？

Answer 1

JSONデータは、FabricJSがキャンバスの作成に使用する一連の手順です。キャンバスをイメージに変換することができます。

そのため、キャンバスを作成してからイメージを作成する必要があります。

代替方法として、FabricJSを実行できるNodeJSを実行するサーバーを作成する方法があります。最終的には同じタスクを実行します。キャンバスを作成してイメージを生成します。しかし、ここでの利点は、それがサーバーに直接ファイルを保存するサーバープロセスであるということです。したがって、このタスクは自動化できます。

しかし、このタスクを実行するためにサーバーを設定してスクリプトを作成することは、あなたのタスクよりも多くの労力を要します。これは、実行する頻度によって異なります。

This post discusses how to install NodeJS and FabricJS。これでサーバーが稼働しますが、サーバー・スクリプトも作成する必要があります。

Answer 2

世代のキャンバスを作成し、それにnoneを表示し、隠れたキャンバスから画像を生成できるように、隠れたキャンバスを作成して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>