🕎 🛋️ 🔍 .NET और जावास्क्रिप्ट के लिए सामान्य सी # कोड 💃🏾 👶 👨🏼‍⚖️

परिचय

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

चूंकि मुझे नहीं पता कि ध्यान आकर्षित करने के लिए चित्रों का चयन कैसे किया जाता है, यह विषय पर होगा:

सामग्री

लक्ष्य

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

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

हमारी परियोजना में फ़िल्टर फ़ोटोशॉप में तैयार किए गए कार्यों (क्रियाओं) के अनुक्रम द्वारा दर्शाया गया है, जो एक विशिष्ट फोटो पर लागू होता है। उदाहरण के लिए एक कार्रवाई हो सकती है:

चमक बदल जाती है
इसके विपरीत बदलना
संतृप्ति परिवर्तन
रंग वक्र सुधार
विभिन्न तरीकों के साथ ओवरले मास्क
फ्रेम ओवरले
...

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

सभी प्लेटफार्मों (.NET, जावास्क्रिप्ट, WinPhone, आदि) के लिए कोड सार्वभौमिकता।
फिल्टर का प्रारूप एक पदानुक्रमित संरचना के बिना सरल है, जो इसके लिए एक पार्सर लिखना आसान बनाता है।
XML और JSON अधिक वजन (इस मामले के लिए)।

उदाहरण के लिए, यहाँ XPro फ़िल्म फ़िल्टर के लिए क्रियाओं का क्रम दिया गया है:

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

कोलाज विवरण

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

एक कोलाज इस तरह लग सकता है:

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

कार्यान्वयन

इसलिए, एक ऐसा मंच चुनना आवश्यक था, जिस पर उपयोगकर्ताओं के लिए फ़िल्टर और कोलाज की कार्यक्षमता काम की हो।

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

निम्नलिखित आरआईए प्रौद्योगिकियां मौजूद हैं:

एडोब फ्लैश
माइक्रोसॉफ्ट सिल्वरलाइट
HTML 5 + जावास्क्रिप्ट
मूल निवासी ग्राहक

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

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

जावास्क्रिप्ट में प्रसारण सी #

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

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

JSIL
SharpKit
स्क्रिप्ट #
और अन्य जिन्हें आप इस सूची में उदाहरण के लिए जीथब पर देख सकते हैं।

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

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

लाभ:

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

नुकसान:

अतिरेक और गैर-मानकता उत्पन्न जावास्क्रिप्ट (mscorlib के कारण)।
केवल ISO-2 विनिर्देशन का समर्थन करें (कोई फ़ंक्शन अधिभार, प्रकार का अनुमान, एक्सटेंशन, जेनरिक और अधिक)।

संरचना

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

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

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

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

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

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

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

#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

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

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

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

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

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

फ़ाइल लिंक

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

और संकलन निर्देशों (DOTNET, SCRIPTSHARP, आदि) का संकेत परियोजना गुणों में सशर्त संकलन प्रतीकों में जोड़ा गया है।

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

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

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

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

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

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

फिर भी, जावास्क्रिप्ट में img और कैनवास में यह अलगाव भविष्य में .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 एमबी (अधिकतम छवि आकार 2400 * 2400 है, प्रति पिक्सेल बाइट्स की संख्या 4 है), जिसका अर्थ है फ़िल्टर के लिए सभी मास्क ( ~ 30 टुकड़े) और कोलाज (40 टुकड़े) मेमोरी में ~ 1.5 जीबी पर कब्जा कर लेंगे, जो सिद्धांत रूप में, सर्वर के लिए बहुत अधिक नहीं है, हालांकि, मास्क की संख्या में वृद्धि के साथ, यह संख्या काफी बढ़ सकती है। इसलिए भविष्य में, मेमोरी में मास्क के संपीड़न का उपयोग करना आवश्यक हो सकता है (.jpg, .png प्रारूप के रूप में), उपयोग के दौरान उन्हें अनपैक करके, विशेष रूप से यह देखते हुए कि आकार को लगभग 300 गुना कम किया जा सकता है। इस दृष्टिकोण का एक अतिरिक्त लाभ यह है कि एक संपीड़ित छवि को बड़े की तुलना में तेजी से कॉपी किया जाता है, जिसका अर्थ है कि लॉक ऑपरेशन में कम समय लगेगा और थ्रेड्स कम अवरुद्ध होंगे।

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

minification

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

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

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

मैनुअल minification है

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

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

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

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

वैसे, स्क्रिप्ट # के विकासशील संस्करण ने पहले से ही निजी और आंतरिक तरीकों और क्षेत्रों के संशोधन को जोड़ा है।

स्वचालित रूप से न्यूनतम

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

यह ध्यान देने योग्य है कि 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> <% } %>

वैसे, हमारी परियोजना में न केवल लिपियों को छोटा किया गया, बल्कि विवरण फ़ाइलों को भी फ़िल्टर किया गया।

क्रॉसऑरिजिन संपत्ति

कुछ छवि के पिक्सेल तक पहुँचने में सक्षम होने के लिए, इसे पहले कैनवास में बदलना होगा। हालाँकि, एक क्रॉस डोमेन एक्सेस (CORS) त्रुटि हो सकती है। हमारे मामले में, इस समस्या को निम्नानुसार हल किया गया था:

ग्राहक पर crossOrigin = '' डालना।
सर्वर पर http पैकेट के लिए एक विशेष हेडर जोड़ना।

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

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

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

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

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

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

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

संसाधनों के लिए क्रॉस-डोमेन एक्सेस के बारे में अधिक जानकारी यहां पाई जा सकती है ।

अनुकूलन

प्रीकम्प्यूटेड (सारणीबद्ध) मूल्यों का उपयोग करना

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

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

 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]]; }

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

नियमित कोड अनुकूलित कोड

 //   . for (int i = 0; i < 256; i++) { r[i] = <actionFunc1R>(i); g[i] = <actionFunc1G>(i); b[i] = <actionFunc1B>(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]]; } … //   . for (int i = 0; i < 256; i++) { r[i] = <actionFunc2R>(i); g[i] = <actionFunc2G>(i); b[i] = <actionFunc2B>(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]]; } …

 //   . for (int i = 0; i < 256; i++) { r[i] = <actionFunc1R>(i); g[i] = <actionFunc1G>(i); b[i] = <actionFunc1B>(i); } … //   . tr = r.Clone(); tg = g.Clone(); tb = b.Clone(); for (int i = 0; i < 256; i++) { r[i] = tr[<actionFunc2R>(i)]; g[i] = tg[<actionFunc2G>(i)]; b[i] = tb[<actionFunc2B>(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]]; } …

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

छवि को पिक्सेल सरणी में बदलें

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

क्रमशः कैनवास और बिटमैप पर छवि को घुमा और उलट रहा है

कृपया ध्यान दें कि html5 कैनवस में मेट्रिसेस के उपयोग के अलावा छवि 90, 180 डिग्री को घुमाने के लिए कोई फ़ंक्शन नहीं हैं, लेकिन .NET में हैं। तो पिक्सल के साथ काम करने वाला संगत सटीक फ़ंक्शन लिखा गया था।

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

 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 }

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

कृपया ध्यान दें कि ScriptSharp संस्करण में, एक और 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; } }

धराशायी रेखा चित्र

छवियों को क्रॉप करते समय आयत के लिए उपयोग किया जाता है। इस प्रश्न पर SO को उत्तर देने वाले सभी लोगों के विचारों के लिए धन्यवाद।

 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++; } }

छवि रोटेशन एनीमेशन

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

 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 और जावास्क्रिप्ट पर था, एंड्रॉइड के लिए संकलन, आईओएस (मोनो का उपयोग करके) और विंडोज फोन भी वर्णित दृष्टिकोण के आधार पर संभव है, स्वाभाविक रूप से अपने स्वयं के नुकसान के साथ। , , , .

, , . .

, , google ASP.NET MS SQL , . :

MS SQL ( TSQL, C#, ).
.
Google maps geocoding api ( , ).

PS gfranq.com oneuser VladaOrlova .

UPDATE

JavaScript, Script# :
imgProcLib

mscorlib ( ):
mscorlib

, , , mscorlib.

UPDATE 2

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

परिचय

सामग्री

लक्ष्य

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

कोलाज विवरण

कार्यान्वयन

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

जावास्क्रिप्ट में प्रसारण सी #

संरचना

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

फ़ाइल लिंक

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

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

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

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

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

minification

मैनुअल minification है

स्वचालित रूप से न्यूनतम

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

क्रॉसऑरिजिन संपत्ति

अनुकूलन

प्रीकम्प्यूटेड (सारणीबद्ध) मूल्यों का उपयोग करना

छवि को पिक्सेल सरणी में बदलें

कोड उदाहरण

सामान्य

केवल स्क्रिप्ट

निष्कर्ष

More articles: