🏻 🛌🏻 🧣 जावास्क्रिप्ट पर GIF GIF करने के लिए 💪🏿 💿 🔑

मैं आपको उन विशेषताओं के बारे में बताऊंगा, जो मैंने कैनवास से जीआईएफ में छवियों को सहेजते समय सामना की थीं।
यहां, तैयार किए गए समाधान और मेरे स्वयं के जावास्क्रिप्ट इमेज क्वांटिज़ेशन कोड (यानी पैलेट को 256 रंगों को कम करना) पर विचार किया जाएगा। कुछ जावास्क्रिप्ट निर्माणों के प्रदर्शन के मुद्दों को भी उठाया जाएगा।

संक्षेप में इस तरह के एक कनवर्टर की आवश्यकता क्यों है

ईमानदारी से, जावास्क्रिप्ट का उपयोग करके छवियों को परिवर्तित करना आवश्यक नहीं है। सर्वर भाषाएँ, जैसे कि PHP, C #, JAVA, इसे अच्छी तरह से कर सकती हैं। लेकिन अगर वहाँ एक जावास्क्रिप्ट छवि संपादक है जो कैनवास के साथ काम करता है, जो पहले से ही जानता है कि कैसे jpg और png स्वरूपों में चित्र प्रदर्शित करना है, तो कम से कम क्लाइंट और सर्वर भागों में तर्क को अलग करना बदसूरत है। यह उस आवेदन की आंतरिक सुंदरता के लिए था जिसे मैंने इस मुद्दे को संबोधित किया था। मैं चाहता हूं कि पूरा आवेदन जवास्रिप्ट में हो।

ईंटें इकट्ठा करो

जेपीईजी या पीएनजी को कैनवस परिवर्तित करना बिल्कुल भी मुश्किल नहीं है। इसके लिए एक कार्य पर्याप्त है:

canvas.toDataURL(mime)

इस फ़ंक्शन का परिणाम एक बेस 64 डाटुरल स्ट्रिंग होगा, जो, उदाहरण के लिए, आसानी से img टैग के src विशेषता में प्रतिस्थापित किया जा सकता है।
माइम पैरामीटर "इमेज / पीएनजी" या "इमेज / जेपीईजी" हो सकता है।
यदि आप "छवि / gif" या "छवि / bmp" को माइम के रूप में पास करते हैं, तो परिणाम अभी भी PNG प्रारूप में होगा।

चूंकि हमारे ग्रह पर कुछ से अधिक प्रोग्रामर हैं, इसलिए मैंने यह पता लगाने का फैसला किया कि क्या किसी को भी इस तरह की समस्या थी और अगर किसी को इस पर हाथ मिला।
मैं भाग्यशाली था, मुझे जल्दी से इंटरनेट पर एक कोड मिला जो BMP प्रारूप में कैनवास को बचाता है: www.nihilogic.dk/labs/canvas2image
मेरे द्वारा आवश्यक कोड का टुकड़ा निकाल लेने के बाद, मैंने GIF के बारे में सेट किया।

लेकिन GIF के साथ यह इतना सरल नहीं था।
एंटीमैटर 15 लाइब्रेरी के लीड "कैनवास से लेकर जिफ़" थीम पर लगभग सभी खोजें: github.com/antimatter15/ssgif
इसलिए, मैंने पहली बार इसे आजमाया। उसके पास एक प्लस है: वह अभी भी जीआईएफ प्रारूप में एक तस्वीर देता है, जिसे अन्य चीजों के अलावा, एनिमेटेड बनाया जा सकता है। जाहिर है, जोर केवल एनीमेशन पर था, क्योंकि मैंने या तो छवि गुणवत्ता या रूपांतरण की गति नहीं देखी थी।

antimatter15 (PNG to GIF, 100x16px, 56ms):

antimatter15 (JPEG to GIF, 604x377px, 4564ms):

एंटीमैटर 15 (GIF, 256x256px, 1052ms के लिए पारदर्शी PNG):

जैसा कि आप देख सकते हैं, सभी चित्रों में विकृत रंग हैं। लेकिन तीसरे के पास एक विशेष मामला है।
मैं समझाऊंगा कि आख़िरी तस्वीर का क्या हुआ। स्रोत फ़ाइल PNG प्रारूप में पारदर्शी पिक्सेल के साथ थी। कैनवास RGBA प्रारूप में पिक्सेल जानकारी प्रदान करता है, अर्थात्, तीन रंग और पारदर्शिता का स्तर। लेकिन एंटीमैटर 15 से लाइब्रेरी केवल पिक्सेल के पारदर्शिता स्तर की अनदेखी करती है और परिणाम पूरी तरह से गलत है।

निष्पक्षता में, मैं ध्यान देता हूं कि कैनवस 2image लाइब्रेरी भी पारदर्शिता के स्तर का अनुभव नहीं करती है।
कैनवास 2image (बीएमपी में पारदर्शी पीएनजी, 256x256px):

इसलिए, मैं सभी से आग्रह करता हूं कि अल्फ़ा बाइट को अनदेखा न करें जो कि कैनवस हमें प्रदान करता है।

आगे की खोजों ने मुझे ओमगिफ़ (GIF 89a एनकोडर के जावास्क्रिप्ट कार्यान्वयन, एनीमेशन और संपीड़न शामिल हैं) के लिए नेतृत्व किया: github.com/deanm/omggif
एक पारदर्शी पिक्सेल उत्पन्न करने वाले एक उदाहरण को देखकर, मैंने तुरंत इस पुस्तकालय का सम्मान करना शुरू कर दिया।

 // 1x1 transparent 43 bytes. function gen_empty_trans() { var gf = new omggif.GifWriter(buf, 1, 1, {palette: [0x000000, 0x000000]}); gf.addFrame(0, 0, 1, 1, [0], {transparent: 0}); return buf.slice(0, gf.end()); }

लेकिन जैसा कि आप उदाहरण से देख सकते हैं, यह कैनवास के साथ काम नहीं करता है। ऑब्जेक्ट बनाते समय, आपको पहले से तैयार पैलेट (रंगों की एक सूची) देने की आवश्यकता होती है, और जब एक फ्रेम जोड़ते हैं, तो पैलेट में सूचकांकों की एक सरणी होती है।
पैलेट और इंडेक्स बनाना, जैसा कि यह निकला, यह परिमाणीकरण से ज्यादा कुछ नहीं है। एंटीमैटर 15 से लाइब्रेरी में, एक अलग फाइल NeuQuant.js इसके लिए जिम्मेदार थी। ओमगिफ में कोई मात्रा नहीं है।
मैंने जावास्क्रिप्ट के लिए कई मात्राओं को देखा, लेकिन किसी ने पारदर्शिता के साथ काम नहीं किया।
ओमगिफ़ लाइब्रेरी के लिए धन्यवाद, मुझे अब GIF फ़ाइल प्रारूप को समझने की आवश्यकता नहीं है, और परिमाणीकरण कार्य मुझे इतना मुश्किल और दिलचस्प नहीं लग रहा था। इसलिए, कनवर्टर को खुद ही खत्म करने का निर्णय लिया गया।

एक पैलेट और इंडेक्स बनाने के लिए एल्गोरिदम

इसलिए, पहले मैंने परिमाणीकरण प्रक्रिया को 4 चरणों में विभाजित किया:

पैलेट में शामिल करने के लिए पिक्सेल खोजें।
उन रंगों को पहचानें जो पैलेट में नहीं हैं।
प्रत्येक रंग के लिए जो पैलेट में फिट नहीं होता है, पैलेट से निकटतम रंग की खोज करें
पैलेट में रंग सूचकांकों के लिए सभी पिक्सेल परिवर्तित करें।

स्टेज 1

सबसे महत्वपूर्ण पहला चरण है। प्राप्त छवि की गुणवत्ता इस पर निर्भर करती है। यदि शेष चरण ठोस हैं - यह केवल एक डेटा सरणी के दूसरे में कुछ परिवर्तन है, तो पहला आइटम कुछ सार दिखता है। यह तुरंत स्पष्ट नहीं है कि किस मापदंड का मूल्यांकन करना है कि फूलों में से कौन सा दूसरे से अधिक महत्वपूर्ण है।

फिर मैंने इस मुद्दे पर गहराई से नहीं जाने का फैसला किया, लेकिन बस कैनवास को कम करें जब तक कि उसमें रंगों की संख्या 255 से कम न हो (एक रंग हमेशा पारदर्शी होता है)। चूंकि स्केलिंग ब्राउज़र द्वारा की जाती है, एल्गोरिथम का यह हिस्सा सबसे तेज़ निकला। संपूर्ण एल्गोरिथ्म के 1500ms में से एक कुत्ते के साथ jpg फ़ाइल के लिए केवल 20ms (ऊपर देखें)।

जाहिर है, मुझे पता चला कि चित्र को दो बार बिल्कुल कम करना सबसे अच्छा है। अन्यथा, रंग विकृत होते हैं।

पारदर्शिता बाइट को देखते हुए, मैंने प्रत्येक पिक्सेल के लिए निम्न सूत्र लागू किए हैं:

  लाल = 0xFF- अल्फा * (1-लाल / 0xFF)
 हरा = 0xFF- अल्फा * (1-हरा / 0xFF)
 नीला = 0xFF- अल्फा * (1-नीला / 0xFF)

इस प्रकार, मैं एक सफेद पृष्ठभूमि पर सभी रंग घटकों को लगाता हूं। इसके अलावा, अगर अल्फा 0 है, तो यह पिक्सेल पूरी तरह से पारदर्शी है और इसे छोड़ दिया गया है।

चरण 2 और 3

इसके बाद, आपको फिर से सभी पिक्सेल से गुजरने और एक अलग सरणी (अतिरिक्त पैलेट) पर जाने की आवश्यकता है, जो पिक्सेल मुख्य पैलेट में नहीं गिरे।
समानांतर में, जब एक नया पिक्सेल का पता लगाया जाता है, तो हम पैलेट से निकटतम रंग निर्धारित करते हैं। यदि हम त्रि-आयामी अंतरिक्ष में एक बिंदु के समन्वय के रूप में लाल, नीले और हरे रंग के घटक रंगों का प्रतिनिधित्व करते हैं, तो दो रंगों के बीच का अंतर दो बिंदुओं के बीच की दूरी की तरह है। और बिंदुओं के बीच की दूरी प्रसिद्ध पायथागॉरियन सूत्र द्वारा निर्धारित की जाती है:

  d = sqrt ((X1 - x2) ^ 2 + (y1 - y2) ^ 2 + (z1 - z2) ^ 2)

तो, हमारे पास एक मुख्य पैलेट और एक अतिरिक्त पैलेट है - रंग जो मुख्य पैलेट में नहीं आते थे। और अतिरिक्त पैलेट के प्रत्येक रंग का मुख्य पैलेट में निकटतम रंग है।
यहां पहले चरण पर ध्यान देने का समय है। इस तथ्य के कारण कि छवि को हर बार पहले ही आधा कर दिया गया था, मुख्य पैलेट के अपूर्ण होने की संभावना है। 255 के बजाय, इसमें केवल 100 या उससे कम फूल हो सकते हैं। इसलिए, आपको मुख्य पैलेट को पूरक करने की आवश्यकता है।

अतिरिक्त चरण

हम उन रंगों के साथ पूरक करेंगे जिनमें मुख्य पैलेट में रंगों से अधिकतम अंतर है। इसके अलावा, हम एक समय में एक जोड़ देंगे और हर बार अतिरिक्त रंग के सापेक्ष एक अतिरिक्त पैलेट को फिर से जोड़ेंगे। और जब मुख्य पैलेट 255 रंगों तक पहुंच जाता है या एक अतिरिक्त पैलेट समाप्त हो जाता है, तो अंतिम चरण पर चलते हैं।

स्टेज 4

यहां सब कुछ सरल है। हम पिक्सेल का एक सरणी पास करते हैं और पिक्सेल के रंग द्वारा मुख्य पैलेट में रंग सूचकांक निर्धारित करते हैं। यदि यह रंग मुख्य पैलेट में नहीं है, तो हम इसे अतिरिक्त पैलेट में ढूंढ रहे हैं। और अतिरिक्त पैलेट में प्रत्येक रंग पहले से ही मुख्य पैलेट से निकटतम रंग है।

जावास्क्रिप्ट के लिए एल्गोरिदम ऑप्टिमाइज़ेशन

Javascrpt पर एल्गोरिथ्म के कार्यान्वयन के दौरान, मुझे इस भाषा की कुछ विशेषताओं के बारे में पता चला जिसने गति को काफी प्रभावित किया।

दो-रंग सूत्र अनुकूलन

हम दो रंगों के बीच न्यूनतम अंतर की गणना करके शुरू करते हैं। मैं जावास्क्रिप्ट भाषा में पायथागॉरियन फॉर्मूला के कई संस्करण दूंगा। आपको क्या लगता है सबसे तेज विकल्प है?

 // 1 Math.sqrt(Math.pow(red1-red2,2)+Math.pow(green1-green2,2)+Math.pow(blue1-blue2,2)) // 2 var mypow = function(a){ return a*a; }; Math.sqrt(mypow(red1-red2)+mypow(green1-green2)+mypow(blue1-blue2)) // 3 Math.sqrt((red1-red2)*(red1-red2)+(green1-green2)*(green1-green2)+(blue1-blue2)*(blue1-blue2)) // 4 var distance = function(a,b,c){ return Math.sqrt(a*a+b*b+c*c); }; distance(red1-red2, green1-green2,blue2-blue2)

मैं हिट परेड को सबसे धीमे संस्करण - विकल्प नंबर 2 के साथ शुरू करूंगा। स्व-लिखित स्क्वैरिंग फ़ंक्शन बिल्ट-इन Math.pow की तुलना में 2.5 गुना धीमा है। लेकिन अगर आप 3rd विकल्प का उपयोग करते हैं, तो एल्गोरिथ्म का एक ही हिस्सा Math.pow की तुलना में 10 गुना अधिक तेजी से निष्पादित करेगा। इससे मैं यह निष्कर्ष निकालता हूं कि जावास्क्रिप्ट में यह बहुत धीरे-धीरे होने वाली फ़ंक्शन कॉल है। और चौथा विकल्प इसकी पुष्टि करता है, तीसरे की तुलना में 10 गुना धीमा काम करता है।
आइए गति बढ़ाने का प्रयास करें। वास्तव में, सूत्र की गणना के परिणाम का उपयोग केवल न्यूनतम और अधिकतम रंग अंतर को खोजने के लिए किया जाएगा। इसलिए, आप वर्गमूल की गणना को सुरक्षित रूप से हटा सकते हैं।

 // 5 (red1-red2)*(red1-red2)+(green1-green2)*(green1-green2)+(blue1-blue2)*(blue1-blue2)

इस प्रकार, हम तीसरे विकल्प की गति को 1.5 गुना बढ़ा देते हैं।
इसके अलावा, आगे के अनुकूलन की गति पर बहुत कम प्रभाव पड़ता है। निम्न विकल्प लगभग समान गति देता है:

 // 6 (red=red1-red2)*red+(green=green1-green2)*green+(blue=blue1-blue2)*blue

तीन चित्रों के साथ दूसरे और तीसरे चरण की तुलना तालिका:

	कुत्ता	अल्फा रोमियो	ब्राउज़र आइकन
Math.sqrt (Math.pow (r1-r2,2) + Math.pow (g1-g2,2) + Math.pow (b1-b2,2))	17211ms	1762ms	117ms
Math.sqrt (mypow (r1-r2) + mypow (g1-g2) + mypow (b1-b2))	40790ms	3875ms	255ms
Math.sqrt ((r1-r2) * (r1-r2) + (g1-g2) * (g1-g2) + (b1-b2) * (b1-b2))	1250ms	149ms	14ms
दूरी (आर 1-आर 2, जी 1-जी 2, बी 2-बी 2)	15006ms	1556ms	99ms
(r1-r2) * (r1-r2) + (g1-g2) * (g1-g2) + (b1-b2) * (b1-b2)	779ms	104ms	12ms
(r = r1-r2) * r + (g = g1-g2) * g + (b = b1-b2) * b	740ms	100ms	10ms

पैलेट सरणी अनुकूलन

सबसे पहले, मैंने पैलेट को स्टोर करने के लिए रंगों की एक सरणी का उपयोग किया। नया रंग जोड़ना इस तरह हुआ:

 if(palette.indexOf(color) == -1) palette.push(color);

लेकिन एक बड़े सरणी में, indexOf को निष्पादित करना एक बहुत ही धीमी गति से कार्य है, क्योंकि यह खोज किए गए सभी तत्वों की तुलना करता है।
इसलिए, मैंने इस विकल्प को तेज़ी से बदल दिया:

 if(!palette[color)) palette[color]=true;

मुख्य पैलेट को भरने का यह विकल्प बहुत तेजी से काम करता है, और अतिरिक्त पैलेट को भरने पर, जो मुख्य एक से बहुत बड़ा हो सकता है, अंतर 2 परिमाण के आदेश थे। हर बार घटक रंगों की गणना नहीं करने के लिए, मैंने उन्हें पैलेट में कैश करने का फैसला किया:

 if(!palette[color)) palette[color]={r:red, g:green, b:blue};

लेकिन पैलेट भरने के बाद, एल्गोरिथ्म मार्ग के कई चक्रों को मानता है:

 for(var color in palette){ var rgb=palette[color]; }

इसके विपरीत, किसी वस्तु के साथ काम करने से यह बहुत धीमा हो जाता है, जैसे कि हम किसी सरणी के साथ काम कर रहे हों:

 for(var i=0, n=palette.length; i<n; i++){ var pal=palette[i]; }

इसलिए, पैलेट को संग्रहीत करने के लिए एक सरणी (पैलेट) का उपयोग करना बेहतर है, और यह जांचने के लिए कि क्या पैलेट में रंग है, (मौजूद) ऑब्जेक्ट का उपयोग करें:

 if(!exists[color)){ exists[color]=true; palette.push({c:color, r:red, g:green, b:blue}); } for(var i=0, n=palette.length; i<n; i++){ var pal=palette[i]; }

लूप ऑप्टिमाइज़ेशन

मैं चक्र पास करने के विभिन्न तरीकों के परीक्षण पर थोड़ा ध्यान दूंगा:

 // 1 for(var i=0, n=palette.length; i<n; i++){ var pal=palette[i]; } // 2 for(var i=0; i<palette.length; i++){ var pal=palette[i]; } // 3 for(var i=0, pal; pal=palette[i]; i++){ }

हाल ही में, मैं बाद के विकल्प का उपयोग कर रहा हूं, क्योंकि मेरे लिए यह सबसे सुविधाजनक है। लेकिन अगर आप प्रदर्शन को देखें, तो स्थिति अस्पष्ट है। लगभग कोई अंतर नहीं है। खुद के लिए न्यायाधीश:

	कुत्ता	अल्फा रोमियो	ब्राउज़र आइकन
(var i = 0, n = palette.length; मैं <n; i ++)	238ms	51ms	3,5ms
(var i = 0; मैं <palette.length; i ++)	244ms	55ms	3,5ms
(var i = 0, pal; पाल = पैलेट [i]; i ++)	230ms	54ms	3,5ms

परिणाम

PNG to GIF, 100x16px, 35ms:

JPEG to GIF, 604x377px, 1338ms:

GIF के लिए पारदर्शी PNG, 256x256px, 268ms:

मैं परिणाम से संतुष्ट हूं। चित्र एंटीमैटर 15 से पुस्तकालय द्वारा उपलब्ध कराए गए चित्रों से बेहतर थे। गति स्वीकार्य थी। वैसे, पारदर्शिता बाइट को ध्यान में रखा जाता है।

यहाँ मेरा कोड है

(कैनवस टॉफिजडाटा और कैनवसप्लेट के मुख्य कार्य)

 // base64 encodes either a string or an array of charcodes var encodeData = function(data) { var strData = ""; if (typeof data == "string") { strData = data; } else { var aData = data; for (var i=0;i<aData.length;i++) { strData += String.fromCharCode(aData[i]); } } return btoa(strData); }; var readCanvasData = function(oCanvas) { var iWidth = parseInt(oCanvas.width); var iHeight = parseInt(oCanvas.height); return oCanvas.getContext("2d").getImageData(0,0,iWidth,iHeight); }; var makeDataURI = function(strData, strMime) { return "data:" + strMime + ";base64," + strData; }; var cW=0xff; var canvasPalette=function(canvas){ var oData = readCanvasData(canvas), data=oData.data, exists={}, palette=[]; for(var i = 0, n=data.length; i < n; i+=4){ var a=data[i+3]; if(a==0) continue; var r=(cW-a*(1-data[i]/cW))|0, g=(cW-a*(1-data[i+1]/cW))|0, b=(cW-a*(1-data[i+2]/cW))|0, col=b+(g<<8)+(r<<16); if(!exists[col]){ if(palette.length>=255){ var subcanvas=document.createElement('canvas'), width=oData.width>>1, height=oData.height>>1; subcanvas.width=width; subcanvas.height=height; subcanvas.getContext('2d').drawImage(canvas, 0, 0,width,height); return canvasPalette(subcanvas); } else{ exists[col]=true; palette.push({c:col,r:r,g:g,b:b}); } } } return {exists:exists, palette:palette}; } var canvasToGIFDataURL = function(canvas){ var dr,dg,db; var oData = readCanvasData(canvas); var data=oData.data; var palette=canvasPalette(canvas); var exists=palette.exists; palette=palette.palette; var outpalette=[]; var pixels=[]; var maxdDifI=null; var maxdDif=0; for(var i = 0,pi=0,l=data.length; i < l; i+=4, pi++){ var a=data[i+3]; if(a==0){ pixels[pi]=-1; continue; } var r=(cW-a*(1-data[i]/cW))|0, g=(cW-a*(1-data[i+1]/cW))|0, b=(cW-a*(1-data[i+2]/cW))|0, col=b+(g<<8)+(r<<16); pixels[pi]=col; if(!exists[col]){ exists[col]=true; var minDif=0xffffff, minDifColIndex=null; for(var j=0, nj=palette.length; j<nj; j++){ var pal=palette[j], d=(dr=pal.rr)*dr+(dg=pal.gg)*dg+(db=pal.bb)*db; if(d<minDif){ minDif=d; minDifColIndex=j; } } if(minDif > maxdDif) { maxdDif=minDif; maxDifI=outpalette.length; } outpalette.push({c:col, d:minDif, r:r, g:g, b:b, index:minDifColIndex}); } } while(maxdDif!=null && palette.length<255){ var dif=outpalette.splice(maxdDifI,1)[0]; maxdDif=null; maxdDifI=0; var r=dif.r, g=dif.g, b=dif.b, col=dif.c; var index=palette.length; palette.push({c:col,r:r,g:g,b:b}); for(var j=0, nj=outpalette.length; j<nj; j++){ var dif=outpalette[j], d=(dr=dif.rr)*dr+(dg=dif.gg)*dg+(db=dif.bb)*db; if(d<dif.d){ dif.d=d; dif.index=index; } if(dif.d > maxdDif) { maxdDif=dif.d; maxDifI=j; } } } var map={}; palette.unshift({c:-1}); for(var j=0,pal; pal=palette[j]; j++){ var col=pal.c; map[col]=j; palette[j]=col; } for(var j=0,dif; dif=outpalette[j]; j++){ map[dif.c]=dif.index+1; } var indexes=[]; for(var i = 0, pixel; pixel=pixels[i]; i++){ indexes.push(map[pixel]); } for(var l=2;l<=256;l=l<<1){ if(palette.length==l) break; if(palette.length<l) { while(palette.length<l) palette.push(0); break; } } var buf = []; var gf = new GifWriter(buf, oData.width, oData.height, {palette: palette}); gf.addFrame(0, 0, oData.width, oData.height, indexes,{transparent: 0}); var binary_gif = buf.slice(0, gf.end()); return makeDataURI(encodeData(binary_gif), 'image/gif'); };

स्रोत तस्वीरें

ब्राउज़र आइकन

कुत्ता

अल्फा रोमियो

अब मैं विश्वास के साथ कह सकता हूं:
- आप छवियों को जावास्क्रिप्ट में बदल सकते हैं!

जावास्क्रिप्ट पर GIF GIF करने के लिए