2011-01-10 12 views
12

पर एकल फ्रेम निकालने के लिए मुझे एक एनिमेटेड जीआईएफ के सभी फ्रेम को HTML5 कैनवास में लोड करने की आवश्यकता है।एनिमेटेड जीआईएफ से कैनवास

कृपया ध्यान दें, मैं "चलाएं" नहीं करना चाहती एनिमेटेड (कोई इस पूछा पहले) सब मैं चाहता हूँ उन्हें एकल छवियों रूप में उपयोग करने के लिए सभी तख्ते निकालने के लिए है।

+0

यू कृपया अधिक विशिष्ट –

+0

ज़रूर हो सकता है। जावास्क्रिप्ट + कैनवास का उपयोग करके, मैं एक एकल "एनिम-जीआईएफ" फ़ाइल लोड करना चाहता हूं (जो कई फ्रेमों से बना है), और फिर मैं प्रत्येक एकल निकाले गए फ्रेम को एकल छवियों के रूप में उपयोग करना चाहता हूं। – Omiod

उत्तर

5

क्षमा करें, संक्षिप्त उत्तर है कि जावास्क्रिप्ट एक एनिमेटेड GIF की वर्तमान फ्रेम को नियंत्रित करने का कोई रास्ता नहीं है।

विस्तृत उत्तर है वहाँ तरीके क्या तुम सिर्फ जे एस के साथ करना चाहते हैं प्रकार के- हैं कि है, लेकिन वे बहुत ज्यादा जटिल हैक्स कर रहे हैं।

hackish तरीका का उदाहरण: एक कैनवास बनाएँ और डोम (तो यह किसी के द्वारा नहीं देखा जाएगा) में जोड़ना नहीं करते। एक फास्ट लूप (सेटटाइमआउट) में, इस कैनवास को लगातार खींचें और स्नैपशॉट्स एकत्र करें। फ्रेम बदल गए हैं या नहीं, यह देखने के लिए कैनवास ImageData की तुलना करें।

यह अपने समय का बेहतर उपयोग हो सकता है, शायद, कैसे आप अपने सर्वर आप के लिए अलग इसे विभाजित करना

+0

हैकिश तरीका स्मार्ट है, लेकिन अप्रत्याशित है। मैं मानता हूं कि यदि कोई बेहतर जेएस समाधान नहीं आता है, तो मुझे सर्वर साइड स्क्रिप्टिंग का सहारा लेना होगा ... धन्यवाद। – Omiod

+2

यह हैक संभव नहीं होना चाहिए। 'जब एक CanvasImageSource ऑब्जेक्ट एक HTMLImageElement में एनिमेटेड छवि का प्रतिनिधित्व करता है, तो उपयोगकर्ता एजेंट को एनीमेशन की डिफ़ॉल्ट छवि का उपयोग करना चाहिए (जिस प्रारूप को परिभाषित किया जाना है जब एनीमेशन समर्थित नहीं है या अक्षम है), या यदि वहां है ऐसी कोई छवि, animation' के पहले फ्रेम https://html.spec.whatwg.org/multipage/scripting.html#dom-context-2d-drawimage#image-sources-for-2d-rendering-contexts – Robert

+0

यह उस समय प्रतिक्रिया शायद सही थी। लेकिन आज libgif-js का उपयोग करके काम मिल सकता है, और यह भी बहुत आसान है। –

6

jsgif पर एक नजर डालें (php/पर्ल/अजगर/आदि के साथ) प्राप्त कर सकते हैं देखने के लिए; यह एक जीआईएफ डाउनलोड करता है, इसे पार करता है, और फ़ाइल के व्यक्तिगत फ्रेम को <canvas> पर खींचता है। खुदाई के साथ आप उस कोड को ढूंढने में सक्षम होना चाहिए जो अलग-अलग फ्रेम खींचता है और वहां से काम करता है।

10

Buzzfeed रेपो tommitytom पोस्ट से कोड librarified है। मैंने अभी तक कोशिश नहीं की है लेकिन यह अच्छा लग रहा है।

https://github.com/buzzfeed/libgif-js

संबंधित मुद्दे