Fabric.js सीधे JSON से पीएनजी

Question

के लिए जा रहा

मैं fabric.js

मैं एक डेटाबेस मैं करने के लिए कैनवास से JSON डेटा की बचत कर रहा हूँ है से बचाया stringified JSON के पीएनजी थंबनेल बनाने की जरूरत है, लेकिन मैं बनाने की जरूरत इस सहेजे गए JSON डेटा से एक पीएनजी थंबनेल गैलरी।

पृष्ठ पर कैनवस का एक गुच्छा बनाने और इस तरह कुछ करने की बजाय।

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

मुझे जेएसओएन डेटा से सीधे पीएनजी बनाने की आवश्यकता है। क्या यह संभव है, अगर ऐसा है तो मैं इसे कैसे कर सकता हूं?

Answer 1

JSON डेटा कैनवास बनाने के लिए फैब्रिकजेएस के लिए निर्देशों का एक सेट है। एक कैनवास को फिर एक छवि में परिवर्तित किया जा सकता है।

इसी कारण से, आपको कैनवास बनाने और फिर छवि बनाने की आवश्यकता होगी।

एक वैकल्पिक तरीका होगा जो सर्वर को नोडजेएस चला रहा है, जो फैब्रिकजेएस चला सकता है। आखिरकार आप वही कार्य करेंगे - एक कैनवास बनाएं और फिर छवि उत्पन्न करें। लेकिन यहां लाभ यह है कि यह एक सर्वर प्रक्रिया है, यह फ़ाइलों को सीधे सर्वर पर सहेज लेगा और इस प्रकार यह कार्य स्वचालित हो सकता है।

लेकिन सर्वर को सेट करना और इस कार्य को करने के लिए स्क्रिप्ट लिखना आपके कार्य की अपेक्षा अधिक प्रयास कर सकता है - इस पर निर्भर करता है कि आपको इसे कितनी बार करने की आवश्यकता होगी।

This post discusses how to install NodeJS and FabricJS। वह सर्वर को चालू और चलाएगा, लेकिन फिर आपको सर्वर स्क्रिप्ट भी लिखनी होगी।

Answer 2

आपके पास एक और वैकल्पिक तरीका है एक पीढ़ी के कैनवास बनाने और इसे प्रदर्शित करने के लिए कोई भी नहीं है, अपने पीएनजी उत्पन्न करने के लिए एक छिपा कैनवास बनाएं, जैसे कि आप एक छिपी हुई सामग्री कैनवास से छवियां उत्पन्न कर सकते हैं।

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