नेट और जावास्क्रिप्ट के लिए यूनिवर्सल सी # कोड

2013 में, GFRANQ फोटो सेवा में काम करने के दौरान, मैंने तस्वीरों के प्रकाशन और प्रसंस्करण के लिए एक बेनामी वेब सेवा के विकास में भाग लिया। फ़ाइल और परिवर्तनों को मापदंडों के साथ फाइल में परिभाषित किया गया था, और सर्वर पर सभी प्रसंस्करण किए गए थे। सेवा विकास के दौरान, पूर्वावलोकन के लिए क्लाइंट की ओर से इन परिवर्तनों का समर्थन करने की आवश्यकता थी। लैरी वॉल के अनुसार, प्रोग्रामर के गुणों में से एक आलस्य है। इसलिए, वास्तव में आलसी प्रोग्रामर के रूप में, हमने सर्वर और क्लाइंट दोनों पक्षों पर समान कोड का उपयोग करने की संभावना के बारे में सोचा। संपूर्ण विकास C # में आयोजित किया गया था। पुस्तकालयों और प्रयासों के एक जोड़े पर शोध करने के बाद, हमने गर्व से निष्कर्ष निकाला कि यह संभव था और सार्वभौमिक कोड लिखना शुरू किया।

इस लेख की आवश्यकता क्यों है? वास्तव में, 2013 से 6 साल बीत चुके हैं, और कई तकनीकों ने अपनी प्रासंगिकता खो दी है, उदाहरण के लिए, स्क्रिप्ट # । दूसरी ओर, नए लोग दिखाई दिए हैं। उदाहरण के लिए, Bridge.NET या Blazor फैंसी WebAssembly के आधार पर।

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

अंतर्वस्तु

• अंतर्वस्तु
• लक्ष्य
  
  • फिल्टर का विवरण
  • कोलाज का विवरण
• कार्यान्वयन
  
  • फोटो प्रोसेसिंग के लिए एक प्लेटफॉर्म चुनना
  • जावास्क्रिप्ट में C # का अनुवाद करना
    
    • लाभ
    • नुकसान
  • संरचना
    
    • उपनाम का उपयोग करना
    • फाइलों के लिंक
  • .NET कार्यान्वयन पर नोट्स
    
    • डिस्पोजल का उपयोग करना
    • लॉक का उपयोग करना
    • स्मृति में भंडारण मास्क
  • जावास्क्रिप्ट कार्यान्वयन पर नोट्स
    
    • minification
      
      • मैनुअल minification है
      • स्वचालित खनन
    • डीबग और रिलीज़ मोड
    • crossOrigin संपत्ति
  • अनुकूलन
    
    • Precalculated मान का उपयोग करना
    • एक छवि को पिक्सेल के एक सरणी में परिवर्तित करना
• कोड उदाहरण
  
  • सामान्य
    
    • पता लगाना कि क्या एक स्ट्रिंग एक संख्या है
    • पूर्णांक विभाजन
    • कैनवस और बिटमैप का उपयोग करके एक इमेज को घुमा और फ़्लिप करना
    • तुल्यकालिक और अतुल्यकालिक छवि लोड हो रहा है
  • लिपि # केवल
    
    • एक ब्राउज़र के प्रकार और संस्करण का पता लगाना
    • एक डैश-डॉट लाइन का प्रतिपादन
    • रोटेशन एनीमेशन
• निष्कर्ष

लक्ष्य

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

फिल्टर का विवरण

हमारी परियोजना के संदर्भ में, एक फ़िल्टर फ़ोटोशॉप में की गई क्रियाओं की एक श्रृंखला है और एक विशेष फ़ोटो पर लागू होती है। नीचे ऐसे कार्यों के उदाहरण दिए गए हैं:

• चमक समायोजन
• इसके विपरीत समायोजन
• संतृप्ति समायोजन
• रंग घटता समायोजन
• विभिन्न मोड में मास्किंग
• फ्रेमिंग
• ...

हमें इन कार्यों का वर्णन करने के लिए एक निश्चित प्रारूप की आवश्यकता है। निश्चित रूप से, JSON और XML जैसे सामान्य प्रारूप हैं, लेकिन निम्नलिखित कारणों से अपना स्वयं का प्रारूप बनाने का निर्णय लिया गया:

• कोड के लिए एक प्लेटफ़ॉर्म-स्वतंत्र वास्तुकला की आवश्यकता (.NET, JavaScript, WinPhone, आदि)
• फिल्टर के एक सरल गैर-पदानुक्रमित प्रारूप की आवश्यकता है, जो एक पार्सर लिखना आसान बनाता है
• XML और JSON डेटा अधिक मेमोरी खपत (इस विशेष मामले में) है

यहाँ XPro फिल्म फ़िल्टर के लिए क्रियाओं का क्रम कैसा दिखता है:

एक फिल्टर के साथ एक तस्वीर को संपादित करने के अलावा, हमें छवि को क्रॉप और घुमाने की आवश्यकता थी। हां, मुझे पता था कि छवियों को क्रॉप और रोटेट करने के लिए jQuery प्लगइन्स हैं, लेकिन वे प्रोजेक्ट के सार्वभौमिक आर्किटेक्चर से अतिभारित और विचलित हो रहे थे।

कोलाज का विवरण

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

कोलाज फ़ीचर का तात्पर्य है 0 से 1 सापेक्ष निर्देशांक, फ़ोटो के पते और छवि संशोधन डेटा के साथ आयतों के भंडारण के लिए एक सरल प्रारूप का उपयोग करना। सापेक्ष निर्देशांक का उपयोग किया जाता है क्योंकि सर्वर-साइड पर बड़े आकार के चित्रों पर समान क्लाइंट-साइड ट्रांसफ़ॉर्मेशन लागू होते हैं।

कार्यान्वयन

हमें प्लेटफ़ॉर्म चुनना था जिससे उपयोगकर्ता फ़िल्टर और कोलाज के साथ काम कर सकें

फोटो प्रोसेसिंग के लिए एक प्लेटफॉर्म चुनना

कई रिच इंटरनेट एप्लिकेशन ( RIA ) तकनीकें हैं जैसे:

• एडोब फ्लैश
• Microsoft चांदी
• HTML 5 + जावास्क्रिप्ट
• मूल निवासी ग्राहक

स्पष्ट कारणों के लिए, फ्लैश और HTML केवल प्रौद्योगिकियां हैं जो ध्यान देने योग्य हैं क्योंकि उनमें से बाकी क्रॉस-प्लेटफॉर्म संगत नहीं हैं। इसके अलावा, सिल्वरलाइट क्लाइंट मरने लगा है। हालांकि मुझे वास्तव में की अवधारणा पसंद है नमक NaCl, दुर्भाग्यवश, यह तकनीक केवल क्रोम ब्राउज़र द्वारा समर्थित है और यह अभी तक ज्ञात नहीं है कि इसे अन्य लोकप्रिय ब्राउज़रों द्वारा कब समर्थित किया जाएगा (और क्या यह कभी भी समर्थित होगा)। 2019 से नोट: यह होगा और नाम WebAssembly है ।

विकल्प ट्रेंडी और प्रगतिशील एचटीएमएल 5 प्लेटफॉर्म के पक्ष में बनाया गया था, जो वर्तमान में फ्लैश के विपरीत आईओएस द्वारा समर्थित है। यह पसंद इस तथ्य पर भी आधारित है कि बहुत सारे पुस्तकालय हैं, जो आपको सी # कोड को जावास्क्रिप्ट में संकलित करने की अनुमति देते हैं। आप इस उद्देश्य के लिए Visual Studio का उपयोग भी कर सकते हैं। विवरण नीचे दिया गया है।

जावास्क्रिप्ट में C # का अनुवाद करना

HTML 5 + जावास्क्रिप्ट को पिछले भाग में एक मंच के रूप में चुना गया है। तो यह हमें एक प्रश्न छोड़ देता है, क्या यह एक सार्वभौमिक C # कोड लिखना संभव है जो .NET और जावास्क्रिप्ट दोनों के लिए संकलित किया जा सकता है।

इस प्रकार, कार्य को पूरा करने के लिए कई पुस्तकालय पाए गए:

• JSIL
• SharpKit
• स्क्रिप्ट #
• और कुछ अन्य GitHub पर उपलब्ध हैं।

परिणामस्वरूप, स्क्रिप्ट # का उपयोग करने का निर्णय लिया गया था, इस तथ्य के कारण कि JSIL असेंबलियों के साथ सीधे काम करता है और कम शुद्ध कोड उत्पन्न करता है (हालांकि यह C # भाषा सुविधाओं की एक विस्तृत श्रृंखला का समर्थन करता है) और SharpKit एक वाणिज्यिक उत्पाद है। इन उपकरणों की विस्तृत तुलना के लिए, स्टैकओवरफ़्लो पर प्रश्न देखें।

योग करने के लिए, ScriptSharp को मैन्युअल रूप से लिखे गए जावास्क्रिप्ट की तुलना में निम्नलिखित नियम और विपक्ष हैं:

लाभ

• एक सार्वभौमिक C # कोड लिखने की संभावना जो .NET और अन्य प्लेटफार्मों (WinPhone, मोनो) के लिए संकलित की जा सके
• ओओपी का समर्थन करने वाली जोरदार टाइप सी # भाषा में विकास
• आईडीई सुविधाओं के लिए समर्थन (स्वत: पूर्णता और रीफैक्टरिंग)
• संकलन चरण में अधिकांश त्रुटियों का पता लगाने की क्षमता

नुकसान

• अतिरेक और उत्पन्न जावास्क्रिप्ट कोड की अनियमितता (mscorlib के कारण)।
• केवल आईएसओ -2 के लिए समर्थन (कोई कार्य अतिभारित या प्रकार, विस्तार, और जेनेरिक इंजेक्शन नहीं)

संरचना

निम्न योजना द्वारा एक ही C # कोड को .NET और जावास्क्रिप्ट में संकलित करने की प्रक्रिया का वर्णन किया जा सकता है:

हालाँकि .NET और HTML5 पूरी तरह से अलग-अलग प्रौद्योगिकियाँ हैं, फिर भी उनमें समान विशेषताएं हैं। यह ग्राफिक्स के साथ काम करने के लिए भी लागू होता है। उदाहरण के लिए, .NET बिटमैप का समर्थन करता है, जावास्क्रिप्ट इसके एनालॉग - कैनवस का समर्थन करता है। वही ग्राफिक्स , संदर्भ और पिक्सेल के सरणियों के साथ जाता है। सभी को एक कोड में संयोजित करने के लिए, निम्नलिखित वास्तुकला विकसित करने का निर्णय लिया गया:

बेशक, यह दो प्लेटफार्मों तक सीमित नहीं है। फॉलोअप के रूप में यह WinPhone के लिए समर्थन जोड़ने की योजना है, और फिर, शायद, एंड्रॉइड और आईओएस।

यह ध्यान दिया जाना चाहिए कि दो प्रकार के ग्राफिक ऑपरेशन हैं:

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

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

उपनाम का उपयोग करना

 #if SCRIPTSHARP using System.Html; using System.Html.Media.Graphics; using System.Runtime.CompilerServices; using Bitmap = System.Html.CanvasElement; using Graphics = System.Html.Media.Graphics.CanvasContext2D; using ImageData = System.Html.Media.Graphics.ImageData; using Image = System.Html.ImageElement; #elif DOTNET using System.Drawing; using System.Drawing.Imaging; using System.Drawing.Drawing2D; using Bitmap = System.Drawing.Bitmap; using Graphics = System.Drawing.Graphics; using ImageData = System.Drawing.Imaging.BitmapData; using Image = System.Drawing.Bitmap; #endif 

दुर्भाग्य से, असुरक्षित प्रकार और सरणियों के लिए उपनाम बनाना असंभव है, दूसरे शब्दों में, सी # में सूचक (बाइट *) के लिए उपनाम

 using PixelArray = byte*, using PixelArray = byte[] 

अप्रबंधित C # कोड का उपयोग करके पिक्सेल का तेजी से प्रसंस्करण करने के लिए, जबकि उसी समय इसे Script # पर संकलित करते हुए, हमने निर्देशों की मदद से निम्नलिखित योजना पेश की:

 #if SCRIPTSHARP PixelArray data = context.GetPixelArray(); #elif DOTNET byte* data = context.GetPixelArray(); #endif 

data सरणी को बाद में पिक्सेल ऑपरेशन (जैसे मास्किंग, फिशे, संतृप्ति समायोजन, और इतने पर) के द्वारा विभिन्न पिक्सेल को लागू करने के लिए उपयोग किया जाता है, दोनों समानांतर और नहीं।

फाइलों के लिंक

प्रत्येक प्लेटफ़ॉर्म के समाधान के लिए एक अलग प्रोजेक्ट जोड़ा जाता है, लेकिन निश्चित रूप से, मोनो, स्क्रिप्ट #, और यहां तक ​​कि सिल्वरलाइट भी सामान्य .NET असेंबली का संदर्भ नहीं दे सकता है। सौभाग्य से, विज़ुअल स्टूडियो में फ़ाइलों के लिंक जोड़ने के लिए एक तंत्र है, जो आपको विभिन्न परियोजनाओं में समान कोड का पुन: उपयोग करने की अनुमति देता है।

कंपाइलर निर्देश ( SCRIPTSHARP , SCRIPTSHARP ) परियोजना संपत्तियों में सशर्त संकलन प्रतीकों में परिभाषित किए गए हैं।

.NET कार्यान्वयन पर नोट्स

उपरोक्त सार और उपनामों ने हमें कम अतिरेक के साथ C # कोड लिखने में मदद की। इसके अलावा, मैं .NET और जावास्क्रिप्ट प्लेटफार्मों के साथ समस्याओं को इंगित करना चाहता हूं जो हमने समाधान कोड विकसित करते समय सामना किया था।

डिस्पोजल का उपयोग करना

कृपया ध्यान दें कि C # वर्ग के किसी भी उदाहरण को शामिल करना, जो कि IDisposable इंटरफ़ेस को लागू करता है, को Dispose करने की विधि या स्टेटमेंट का उपयोग करने की आवश्यकता होती है। इस परियोजना में, ये कक्षाएं बिटमैप और संदर्भ हैं। मैंने जो ऊपर कहा है वह सिर्फ सिद्धांत नहीं है, वास्तव में इसका एक व्यावहारिक अनुप्रयोग है: ASP.NET डेवलपर सर्वर x86 पर बड़ी संख्या में बड़े आकार के फोटो (2400 x 2400 डीपीआई तक) को संसाधित करना स्मृति के अपवाद के कारण हुआ। सही स्थानों पर Dispose को जोड़ने के बाद समस्या हल हो गई थी। छवि हेरफेर पर कुछ अन्य सहायक सलाह निम्नलिखित लेख में दिए गए हैं 20 छवि आकार बदलना नुकसान और .NET मेमोरी लीक: निपटान करने या न करने के लिए, यह 1 जीबी प्रश्न है ।

लॉक का उपयोग करना

जावास्क्रिप्ट में, टैग img साथ पहले से अपलोड की गई छवि के बीच एक अंतर है, जिसके लिए आप स्रोत और लोडिंग घटना और कैनवास टैग किए गए canvas निर्दिष्ट कर सकते हैं, जिस पर आप कुछ आकर्षित कर सकते हैं। .NET में इन तत्वों को एक ही Bitmap वर्ग द्वारा दर्शाया गया है। इस प्रकार, उपनाम बिटमैप और छवि .NET में एक ही क्लास System.Drawing.Bitmap को इंगित करते हैं। जैसा कि ऊपर दिखाया गया है।

फिर भी, जावास्क्रिप्ट में img और canvas में यह विभाजन .NET संस्करण में भी बहुत सहायक था। मुद्दा यह है कि फिल्टर विभिन्न थ्रेड्स से पहले से लोड किए गए मास्क का उपयोग करते हैं; इस प्रकार, सिंक्रनाइज़ेशन के दौरान अपवाद से बचने के लिए लॉक पैटर्न की आवश्यकता होती है (छवि को लॉक के साथ कॉपी किया जाता है और परिणाम लॉकिंग के बिना उपयोग किया जाता है):

 internal static Bitmap CloneImage(Image image) { #if SCRIPTSHARP Bitmap result = (Bitmap)Document.CreateElement("canvas"); result.Width = image.Width; result.Height = image.Height; Graphics context = (Graphics)result.GetContext(Rendering.Render2D); context.DrawImage(image, 0, 0); return result; #else Bitmap result; lock (image) result = new Bitmap(image); return result; #endif } 

आखिरकार, एक सिंक्रनाइज़ ऑब्जेक्ट के गुणों तक पहुंचते समय लॉक का भी उपयोग किया जाना चाहिए (वास्तव में, कोई भी गुण विधियां हैं)।

स्मृति में भंडारण मास्क

प्रसंस्करण में तेजी लाने के लिए, सर्वर के शुरू होने पर फिल्टर के लिए सभी संभावित उपयोग किए गए मास्क को मेमोरी में लोड किया जाता है। कोई फर्क नहीं पड़ता कि मुखौटा क्या प्रारूप है, सर्वर पर अपलोड किया गया बिटमैप 4 * 2400 * 2400 या ≈24 MB मेमोरी का उपयोग करता है (अधिकतम छवि आकार 2400 * 2400 ; प्रति पिक्सेल बाइट्स की संख्या 4 है)। फिल्टर ()30) और कोलाज (40) के लिए सभी मास्क 1.5 जीबी का उपभोग करेंगे - यह सर्वर के लिए बहुत अधिक नहीं है; हालाँकि, मास्क की संख्या बढ़ने पर यह राशि काफी बढ़ सकती है। भविष्य में, हम संभवतः स्मृति में संग्रहीत मास्क (.jpg और .png प्रारूपों) के लिए संपीड़न तकनीकों का उपयोग करेंगे जब आवश्यक हो तो विघटन के बाद। दरअसल, आकार को 300 गुना तक कम किया जा सकता है। इस दृष्टिकोण का एक अतिरिक्त लाभ यह है कि संपीड़ित चित्रों की नकल बड़े लोगों की तुलना में तेजी से होती है; इस प्रकार, लॉक ऑपरेशन में कम समय लगेगा और थ्रेड्स को कम बार अवरुद्ध किया जाएगा।

जावास्क्रिप्ट कार्यान्वयन पर नोट्स

minification

मैंने निम्नलिखित कारण के लिए "ओफ़्फ़्यूशन" शब्द का उपयोग करने से इनकार कर दिया: यह शब्द पूरी तरह से खुले स्रोत वाली भाषा पर लागू होता है, जो हमारे मामले में जावास्क्रिप्ट है। हालांकि, पहचानकर्ताओं का अज्ञातकरण कोड पठनीयता और तर्क को गड़बड़ कर सकता है। और सबसे महत्वपूर्ण बात, यह तकनीक स्क्रिप्ट के आकार (संकुचित संस्करण )80 KB) को काफी कम कर देगी।

जावास्क्रिप्ट न्यूनतम करने के लिए दो दृष्टिकोण हैं:

• मैनुअल मिनिफिकेशन, जो ScriptSharp का उपयोग करके जनरेशन स्टेज पर किया जाता है।
• स्वचालित खनन, जो बाहरी चरण जैसे कि Google क्लोजर कंपाइलर, यूआई और अन्य उपकरणों का उपयोग करके पीढ़ी चरण के बाद किया जाता है।

मैनुअल minification है

विधियों, वर्गों, और विशेषताओं के नामों को छोटा करने के लिए हमने उपर्युक्त संस्थाओं की घोषणा से पहले इस वाक्यविन्यास का उपयोग किया था। बेशक, ऐसा करने की कोई आवश्यकता नहीं है कि अगर आप बाहरी लिपियों और कक्षाओं (सार्वजनिक) से कहे जाने वाले तरीकों के साथ काम कर रहे हैं।

 #if SCRIPTSHARP && !DEBUG [ScriptName("a0")] #endif 

वैसे भी, स्थानीय चर को छोटा नहीं किया जा सकता था। ये कोड और प्रदूषित कोड पठनीयता को प्रदूषित करते हैं, जो एक गंभीर नुकसान भी है। हालाँकि, यह तकनीक उत्पन्न जावास्क्रिप्ट कोड की मात्रा को काफी कम कर सकती है और इसे गड़बड़ भी कर सकती है।

एक और नुकसान यह है कि आपको ऐसे छोटे नामों पर नज़र रखने की ज़रूरत है यदि वे विधि और क्षेत्र के नाम (विशेष रूप से, बच्चे कक्षाओं में ओवरराइड नाम) का नाम बदल देते हैं क्योंकि इस मामले में स्क्रिप्ट # दोहराए जाने वाले नामों की परवाह नहीं करेगी। हालाँकि, यह डुप्लिकेटेड कक्षाओं की अनुमति नहीं देगा।

वैसे, निजी और आंतरिक तरीकों और क्षेत्रों के लिए न्यूनतम कार्यक्षमता पहले से ही स्क्रिप्ट # के विकसित संस्करण में जोड़ दी गई थी।

स्वचालित खनन

यद्यपि जावास्क्रिप्ट खनन के लिए बहुत सारे उपकरण हैं, मैंने इसके ब्रांड और संपीड़न की अच्छी गुणवत्ता के लिए Google क्लोजर कंपाइलर का उपयोग किया। Google के खनन उपकरण का नुकसान यह है कि यह CSS फाइलों को संपीड़ित नहीं कर सकता है; इसके विपरीत, YUI इस चुनौती को सफलतापूर्वक पूरा करता है। वास्तव में, स्क्रिप्ट # स्क्रिप्ट को छोटा भी कर सकती है, लेकिन इस चुनौती को Google क्लोजर से भी बदतर बना देती है।

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

डीबग और रिलीज़ मोड

डीबग और रिलीज़ लाइब्रेरी ASP.NET पृष्ठों में निम्नानुसार जोड़े गए थे:

 <% if (Gfranq.JavaScriptFilters.HtmlHelper.IsDebug) { %> <script src="Scripts/mscorlib.debug.js" ></script> <script src="Scripts/imgProcLib.debug.js" ></script> <% } else { %> <script src="Scripts/mscorlib.js" ></script> <script src="Scripts/imgProcLib.js" ></script> <% } %> 

इस परियोजना में, हमने स्क्रिप्ट और फ़िल्टर विवरण फ़ाइलों दोनों को छोटा कर दिया।

crossOrigin संपत्ति

कुछ विशेष छवि के पिक्सल तक पहुंचने के लिए, हमें इसे पहले कैनवास में बदलने की आवश्यकता है। लेकिन इससे क्रॉस ओरिजिन रिक्वेस्ट सिक्योरिटी (कोर) त्रुटि हो सकती है। हमारे मामले में, समस्या का समाधान इस प्रकार था:

• सर्वर-साइड पर crossOrigin = '' विशेषता सेट करना।
• सर्वर-साइड पर HTTP पैकेज में एक विशिष्ट हेडर जोड़ना।

चूंकि ScriptSharp img तत्वों के लिए इस संपत्ति का समर्थन नहीं करता है, इसलिए निम्न कोड लिखा गया था:

 [Imported] internal class AdvImage { [IntrinsicProperty] internal string CrossOrigin { get { return string.Empty; } set { } } } 

फिर, हम इसे इस तरह उपयोग करेंगे:

 ((AdvImage)(object)result).CrossOrigin = ""; 

यह तकनीक आपको संकलन त्रुटियों के बिना किसी भी सुविधा को जोड़ने की अनुमति देती है। विशेष रूप से, wheelDelta संपत्ति wheelDelta में अभी तक लागू नहीं हुई है (कम से कम संस्करण 0.7.5 में)। यह गुण स्क्रॉल व्हील राशि को इंगित करता है, जिसका उपयोग कोलाज बनाने के लिए किया जाता है। इसलिए इसे इस तरह से लागू किया गया था। गुणों के साथ इस तरह की एक गंदा हैक अच्छा नहीं है; आम तौर पर, आपको परियोजना में बदलाव करने की जरूरत है। लेकिन सिर्फ रिकॉर्ड के लिए, मैंने अभी तक ScriptSharp को स्रोत से संकलित करने का एक तरीका नहीं निकाला है।

ऐसी छवियों को सर्वर को अपनी प्रतिक्रिया हेडर में निम्नलिखित हेडर वापस करने की आवश्यकता होती है (Global.asax में):

 Response.AppendHeader("Access-Control-Allow-Origin", "\*"); 

क्रॉस ओरिजिनल रिक्वेस्ट सिक्योरिटी के बारे में अधिक जानकारी के लिए http://enable-cors.org/ पर जाएँ।

अनुकूलन

Precalculated मान का उपयोग करना

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

सभी संभावित मूल्यों के लिए परिणामी रंग घटकों की गणना:

 for (int i = 0; i < 256; i++) { r[i] = ActionFuncR(i); g[i] = ActionFuncG(i); b[i] = ActionFuncB(i); } 

पूर्वनिर्मित रंग घटकों का उपयोग:

 for (int i = 0; i < data.Length; i += 4) { data[i] = r[data[i]]; data[i + 1] = g[data[i + 1]]; data[i + 2] = b[data[i + 2]]; } 

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

लेकिन यह भी यह सब नहीं है। यदि आपको दाईं ओर तालिका दिखाई देती है, तो आप देखेंगे कि Clone पद्धति का उपयोग करके नई सरणियाँ बनाई गई हैं। वास्तव में, आप केवल सरणी को कॉपी करने के बजाय पुराने और नए सरणियों को इंगित कर सकते हैं (यह डबल बफरिंग के सादृश्य को याद करता है)।

एक छवि को पिक्सेल के एक सरणी में परिवर्तित करना

Google Chrome में जावास्क्रिप्ट प्रोफाइलर ने खुलासा किया कि GetImageData फ़ंक्शन (जिसका उपयोग कैनवास को पिक्सेल के सरणी में बदलने के लिए किया जाता है) लंबे समय तक चलता है। यह जानकारी, जावास्क्रिप्ट में कैनवस अनुकूलन पर विभिन्न लेखों में पाई जा सकती है।

हालाँकि, इस फ़ंक्शन की कॉल की संख्या कम से कम हो सकती है। अर्थात्, हम पिक्सेल के समान पिक्सेल का उपयोग पिक्सेल संचालन के लिए कर सकते हैं, पिछले अनुकूलन के साथ सादृश्य द्वारा।

कोड उदाहरण

नीचे दिए गए उदाहरणों में, मैं कोड के टुकड़े प्रदान करूंगा जो मुझे दिलचस्प और उपयोगी लगे। लेख को बहुत लंबा होने से बचाने के लिए, मैंने एक स्पॉइलर के नीचे उदाहरण छिपाए हैं।

सामान्य

पता लगाना कि क्या एक स्ट्रिंग एक संख्या है

 internal static bool IsNumeric(string n) { #if !SCRIPTSHARP return ((Number)int.Parse(n)).ToString() != "NaN"; #else double number; return double.TryParse(n, out number); #endif } 

पूर्णांक विभाजन

 internal static int Div(int n, int k) { int result = n / k; #if SCRIPTSHARP result = Math.Floor(n / k); #endif return result; } 

कैनवस और बिटमैप का उपयोग करके एक इमेज को घुमा और फ़्लिप करना

कृपया ध्यान दें कि एचटीएमएल 5 में कैनवस छवियों को केवल मैट्रिक्स का उपयोग करके 90 और 180 डिग्री घुमाया जा सकता है, जबकि .NET बढ़ाया कार्यक्षमता प्रदान करता है। इस प्रकार, पिक्सेल के साथ काम करने के लिए एक उपयुक्त सटीक फ़ंक्शन लिखा गया था।

यह भी ध्यान देने योग्य है कि .NET संस्करण में कोई भी पक्ष 90-डिग्री रोटेशन गलत परिणाम दे सकता है। इसलिए, आपको RotateFlip फ़ंक्शन का उपयोग करने के बाद एक नया Bitmap बनाने की आवश्यकता है।

 public static Bitmap RotateFlip(Bitmap bitmap, RotFlipType rotFlipType) { #if SCRIPTSHARP int t, i4, j4, w, h, c; if (rotFlipType == RotFlipType.RotateNoneFlipNone) return bitmap; GraphicsContext context; PixelArray data; if (rotFlipType == RotFlipType.RotateNoneFlipX) { context = GraphicsContext.GetContext(bitmap); data = context.GetPixelArray(); w = bitmap.Width; h = bitmap.Height; for (int i = 0; i < h; i++) { c = (i + 1) * w * 4 - 4; for (int j = 0; j < w / 2; j++) { i4 = (i * w + j) * 4; j4 = j * 4; t = (int)data[i4]; data[i4] = data[c - j4]; data[c - j4] = t; t = (int)data[i4 + 1]; data[i4 + 1] = data[c - j4 + 1]; data[c - j4 + 1] = t; t = (int)data[i4 + 2]; data[i4 + 2] = data[c - j4 + 2]; data[c - j4 + 2] = t; t = (int)data[i4 + 3]; data[i4 + 3] = data[c - j4 + 3]; data[c - j4 + 3] = t; } } context.PutImageData(); } else if (rotFlipType == RotFlipType.Rotate180FlipNone || rotFlipType == RotFlipType.Rotate180FlipX) { context = GraphicsContext.GetContext(bitmap); data = context.GetPixelArray(); w = bitmap.Width; h = bitmap.Height; c = w * 4 - 4; int dlength4 = data.Length - 4; for (int i = 0; i < data.Length / 4 / 2; i++) { i4 = i * 4; if (rotFlipType == RotFlipType.Rotate180FlipNone) j4 = i4; else j4 = (Math.Truncate((double)i / w) * w + (w - i % w)) * 4; t = (int)data[j4]; data[j4] = data[dlength4 - i4]; data[dlength4 - i4] = t; t = (int)data[j4 + 1]; data[j4 + 1] = data[dlength4 - i4 + 1]; data[dlength4 - i4 + 1] = t; t = (int)data[j4 + 2]; data[j4 + 2] = data[dlength4 - i4 + 2]; data[dlength4 - i4 + 2] = t; t = (int)data[j4 + 3]; data[j4 + 3] = data[dlength4 - i4 + 3]; data[dlength4 - i4 + 3] = t; } context.PutImageData(); } else { Bitmap tempBitmap = PrivateUtils.CreateCloneBitmap(bitmap); GraphicsContext tempContext = GraphicsContext.GetContext(tempBitmap); PixelArray temp = tempContext.GetPixelArray(); t = bitmap.Width; bitmap.Width = bitmap.Height; bitmap.Height = t; context = GraphicsContext.GetContext(bitmap); data = context.GetPixelArray(); w = tempBitmap.Width; h = tempBitmap.Height; if (rotFlipType == RotFlipType.Rotate90FlipNone || rotFlipType == RotFlipType.Rotate90FlipX) { c = w * h - w; for (int i = 0; i < temp.Length / 4; i++) { t = Math.Truncate((double)i / h); if (rotFlipType == RotFlipType.Rotate90FlipNone) i4 = i * 4; else i4 = (t * h + (h - i % h)) * 4; j4 = (c - w * (i % h) + t) * 4; //j4 = (w * (h - 1 - i4 % h) + i4 / h) * 4; data[i4] = temp[j4]; data[i4 + 1] = temp[j4 + 1]; data[i4 + 2] = temp[j4 + 2]; data[i4 + 3] = temp[j4 + 3]; } } else if (rotFlipType == RotFlipType.Rotate270FlipNone || rotFlipType == RotFlipType.Rotate270FlipX) { c = w - 1; for (int i = 0; i < temp.Length / 4; i++) { t = Math.Truncate((double)i / h); if (rotFlipType == RotFlipType.Rotate270FlipNone) i4 = i * 4; else i4 = (t * h + (h - i % h)) * 4; j4 = (c + w * (i % h) - t) * 4; // j4 = w * (1 + i4 % h) - i4 / h - 1; data[i4] = temp[j4]; data[i4 + 1] = temp[j4 + 1]; data[i4 + 2] = temp[j4 + 2]; data[i4 + 3] = temp[j4 + 3]; } } context.PutImageData(); } return bitmap; #elif DOTNET Bitmap result = null; switch (rotFlipType) { case RotFlipType.RotateNoneFlipNone: result = bitmap; break; case RotFlipType.Rotate90FlipNone: bitmap.RotateFlip(RotateFlipType.Rotate90FlipNone); result = new Image(bitmap); bitmap.Dispose(); break; case RotFlipType.Rotate270FlipNone: bitmap.RotateFlip(RotateFlipType.Rotate270FlipNone); result = new Image(bitmap); bitmap.Dispose(); break; case RotFlipType.Rotate180FlipNone: bitmap.RotateFlip(RotateFlipType.Rotate180FlipNone); result = bitmap; break; case RotFlipType.RotateNoneFlipX: bitmap.RotateFlip(RotateFlipType.RotateNoneFlipX); result = bitmap; break; case RotFlipType.Rotate90FlipX: bitmap.RotateFlip(RotateFlipType.Rotate90FlipX); result = new Image(bitmap); bitmap.Dispose(); break; case RotFlipType.Rotate180FlipX: bitmap.RotateFlip(RotateFlipType.Rotate180FlipX); result = bitmap; break; case RotFlipType.Rotate270FlipX: bitmap.RotateFlip(RotateFlipType.Rotate270FlipX); result = new Image(bitmap); bitmap.Dispose(); break; } return result; #endif } 

तुल्यकालिक और अतुल्यकालिक छवि लोड हो रहा है

ध्यान दें कि स्क्रिप्ट # संस्करण में हम एक अलग फ़ंक्शन CollageImageLoad निर्दिष्ट करते हैं, जिसे एक छवि लोड करने के बाद कहा जाता है, जबकि .NET संस्करण में ये प्रक्रियाएं एक साथ (फ़ाइल सिस्टम या इंटरनेट से) होती हैं।

 public CollageData(string smallMaskPath, string bigMaskPath, List<CollageDataPart> dataParts) { SmallMaskImagePath = smallMaskPath; BigMaskImagePath = bigMaskPath; #if SCRIPTSHARP CurrentMask = PrivateUtils.CreateEmptyImage(); CurrentMask.AddEventListener("load", CollageImageLoad, false); CurrentMask.Src = CurrentMaskImagePath; #else CurrentMask = PrivateUtils.LoadBitmap(CurrentMaskImagePath); if (!CurrentMaskImagePath.Contains("http://") && !CurrentMaskImagePath.Contains("https://")) CurrentMask = Bitmap(CurrentMaskImagePath); else { var request = WebRequest.Create(CurrentMaskImagePath); using (var response = request.GetResponse()) using (var stream = response.GetResponseStream()) CurrentMask = (Bitmap)Bitmap.FromStream(stream); } #endif DataParts = dataParts; } 

लिपि # केवल

एक ब्राउज़र के प्रकार और संस्करण का पता लगाना

इस फ़ंक्शन का उपयोग विभिन्न ब्राउज़रों में ड्रैग एंड ड्रॉप क्षमताओं को निर्धारित करने के लिए किया जाता है। मैंने आधुनिकीकरण का उपयोग करने की कोशिश की है, लेकिन यह उस सफारी को वापस कर दिया (और मेरे मामले में, यह एक विन संस्करण था) IE9 ने इसे लागू किया। व्यवहार में, ये ब्राउज़र ड्रैग एंड ड्रॉप क्षमताओं को सही ढंग से लागू करने में विफल होते हैं।

 internal static string BrowserVersion { get { DetectBrowserTypeAndVersion(); return _browserVersion; } } private static void DetectBrowserTypeAndVersion() { if (!_browserDetected) { string userAgent = Window.Navigator.UserAgent.ToLowerCase(); if (userAgent.IndexOf("opera") != -1) _browser = BrowserType.Opera; else if (userAgent.IndexOf("chrome") != -1) _browser = BrowserType.Chrome; else if (userAgent.IndexOf("safari") != -1) _browser = BrowserType.Safari; else if (userAgent.IndexOf("firefox") != -1) _browser = BrowserType.Firefox; else if (userAgent.IndexOf("msie") != -1) { int numberIndex = userAgent.IndexOf("msie") + 5; _browser = BrowserType.IE; _browserVersion = userAgent.Substring(numberIndex, userAgent.IndexOf(';', numberIndex)); } else _browser = BrowserType.Unknown; _browserDetected = true; } } 

एक डैश-डॉट लाइन का प्रतिपादन

इस कोड का उपयोग छवियों को क्रॉप करने के लिए एक आयत के लिए किया जाता है। स्टैकओवरफ्लो पर इस सवाल का जवाब देने वाले सभी लोगों के विचारों के लिए धन्यवाद।

 internal static void DrawDahsedLine(GraphicsContext context, double x1, double y1, double x2, double y2, int[] dashArray) { if (dashArray == null) dashArray = new int[2] { 10, 5 }; int dashCount = dashArray.Length; double dx = x2 - x1; double dy = y2 - y1; bool xSlope = Math.Abs(dx) > Math.Abs(dy); double slope = xSlope ? dy / dx : dx / dy; context.MoveTo(x1, y1); double distRemaining = Math.Sqrt(dx * dx + dy * dy); int dashIndex = 0; while (distRemaining >= 0.1) { int dashLength = (int)Math.Min(distRemaining, dashArray[dashIndex % dashCount]); double step = Math.Sqrt(dashLength * dashLength / (1 + slope * slope)); if (xSlope) { if (dx < 0) step = -step; x1 += step; y1 += slope * step; } else { if (dy < 0) step = -step; x1 += slope * step; y1 += step; } if (dashIndex % 2 == 0) context.LineTo(x1, y1); else context.MoveTo(x1, y1); distRemaining -= dashLength; dashIndex++; } } 

रोटेशन एनीमेशन

setInterval फ़ंक्शन का उपयोग इमेज रोटेशन एनीमेशन को लागू करने के लिए किया जाता है। ध्यान दें कि परिणाम छवि की गणना एनीमेशन के दौरान की जाती है ताकि एनीमेशन के अंत में कोई लैग न हो।

 public void Rotate(bool cw) { if (!_rotating && !_flipping) { _rotating = true; _cw = cw; RotFlipType oldRotFlipType = _curRotFlipType; _curRotFlipType = RotateRotFlipValue(_curRotFlipType, _cw); int currentStep = 0; int stepCount = (int)(RotateFlipTimeSeconds * 1000 / StepTimeTicks); Bitmap result = null; _interval = Window.SetInterval(delegate() { if (currentStep < stepCount) { double absAngle = GetAngle(oldRotFlipType) + currentStep / stepCount * Math.PI / 2 * (_cw ? -1 : 1); DrawRotated(absAngle); currentStep++; } else { Window.ClearInterval(_interval); if (result != null) Draw(result); _rotating = false; } }, StepTimeTicks); result = GetCurrentTransformResult(); if (!_rotating) Draw(result); } } private void DrawRotated(double rotAngle) { _resultContext.FillColor = FillColor; _resultContext.FillRect(0, 0, _result.Width, _result.Height); _resultContext.Save(); _resultContext._graphics.Translate(_result.Width / 2, _result.Height / 2); _resultContext._graphics.Rotate(-rotAngle); _resultContext._graphics.Translate(-_origin.Width / 2, -_origin.Height / 2); _resultContext._graphics.DrawImage(_origin, 0, 0); _resultContext.Restore(); } private void Draw(Bitmap bitmap) { _resultContext.FillColor = FillColor; _resultContext.FillRect(0, 0, _result.Width, _result.Height); _resultContext.Draw2(bitmap, (int)((_result.Width - bitmap.Width) / 2), (int)((_result.Height - bitmap.Height) / 2)); } 

निष्कर्ष

यह आलेख बताता है कि वास्तव में क्रॉस-प्लेटफ़ॉर्म समाधान बनाने के लिए C # भाषा (जावास्क्रिप्ट के लिए अप्रबंधित कोड और संकलन) का उपयोग कैसे किया जा सकता है। एंड्रॉइड, आईओएस (मोनो का उपयोग करके) के संकलन के लिए .NET और जावास्क्रिप्ट पर ध्यान केंद्रित करने के बावजूद, और विंडोज फोन भी इस दृष्टिकोण के आधार पर संभव है, जो निश्चित रूप से इसके नुकसान हैं। इसकी सार्वभौमिकता के कारण कोड थोड़ा बेमानी है, लेकिन यह प्रदर्शन को प्रभावित नहीं करता है क्योंकि ग्राफिक ऑपरेशन आमतौर पर अधिक समय लेते हैं।