👩🏾‍🎨 😍 🧙🏻 परिणाम कैशिंग के साथ मक्खी पर छवि प्रसंस्करण के लिए एक सरल समाधान ☺️ 🛬 ♋️

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

किसी भी आकार में छवियों का आकार बदलें (नए आकारों को जोड़ना सिरदर्द का कारण नहीं होना चाहिए)
छवि संशोधन: वॉटरमार्क जोड़ना, ग्रेस्केल, सेपिया प्रभाव और आम तौर पर नए प्रभाव जोड़ना एक मुश्किल काम नहीं होना चाहिए
छवि प्रसंस्करण मुख्य धारा (पृष्ठ लोडिंग गति) को प्रभावित नहीं करना चाहिए
पृष्ठ पर छवियों को लोड करने में तेजी लाने के लिए, समाधान आपको ब्राउज़र में एक साथ कनेक्शन की सीमा को बायपास करने की अनुमति देनी चाहिए, सीमा के बारे में अधिक ( rus )
url को आकार बदलने के मापदंडों को स्पष्ट रूप से पारित करके सर्वर को बंद करने की संभावना से बचें
कैशे काम के परिणाम

निर्णय

इसके साथ शुरू करने के लिए, मैं इस समस्या को हल करने के लिए साधन की पसंद का तर्क देता हूं। PHP में छवियों के साथ काम करने के लिए विचार किए गए पुस्तकालयों में, मैंने 3 मुख्य पहचान की: वाइडइमेज , PHPThumb , इमेजिन । मेरी पसंद उत्तरार्द्ध पर गिर गई, क्योंकि पहले दो को बहुत लंबे समय तक अपडेट नहीं किया गया था और यह स्पष्ट नहीं है कि क्या। मैंने टिविग को टेम्पलेट इंजन के रूप में चुना जिसके लिए मैंने इस समाधान को अनुकूलित किया। खैर, वेब सर्वर के रूप में मैंने Nginx और Apache को चुना। Nginx - समर्पित सर्वरों के लिए, और साझा होस्टिंग पर स्वास्थ्य के लिए अपाचे।

गिटहब भंडार

समाप्त समाधान इस तरह दिखता है:
PHP में

echo thumb(__DIR__ . '/images/Chrysanthemum.jpg', '200x100', [ "watermark" => "right top" ]);

टहनी पर

 <img src="{{ image|thumb("200x200", { "watermark": "right bottom", "grayscale": true }) }}" />

इस फ़िल्टर के उपलब्ध होने के लिए, आपको ट्विग के एक्सटेंशन को कनेक्ट करना होगा।

 $twig->addExtension(new \Bazalt\Thumbs\Extension());

1. किसी भी आकार के लिए छवियों का आकार बदलें

जैसा कि आप देख सकते हैं, thumb फ़ंक्शन का दूसरा पैरामीटर छवि का आकार लेता है; डिफ़ॉल्ट रूप से, एल्गोरिथ्म किनारों को निर्दिष्ट आकार में कटौती करता है यदि, आकार में आनुपातिक कमी के बाद, पक्षों में से एक बाहर निकलता है। यदि मापदंडों में से एक 0 पर सेट है, तो छवि आनुपातिक रूप से कम हो जाएगी, और दूसरी तरफ का आकार आनुपातिक रूप से गणना करेगा, उदाहरण के लिए, आउटपुट पर आकार '200x0' के पैरामीटर के साथ 400x300 आकार की एक छवि 200x150 का आकार होगी, और '0x200' के आकार के साथ - 266x200।

2. छवि संशोधन

छवि संशोधन की कार्यक्षमता का विस्तार करना बहुत सरल है। ऑपरेशंस क्लास है, जिसके मूल संस्करण में केवल size कार्य है, अपनी खुद की कार्यक्षमता को जोड़ने के लिए आपको बस इसे इनहेरिट करना होगा और इसमें आवश्यक कार्यों का वर्णन करना होगा। thumb फ़ंक्शन का तीसरा पैरामीटर इन अतिरिक्त संशोधक को कॉल करने के लिए सटीक thumb से जिम्मेदार है, यह एक सरणी है जिसकी कुंजी फ़ंक्शन का नाम है, और इस फ़ंक्शन को दिए जाने वाले विकल्प का मूल्य।

कई संशोधक का उदाहरण

 class Operations extends \Bazalt\Thumbs\Operations { public function watermark(\Imagine\Image\ImageInterface $image, $options, $allOptions) { $imagine = new \Imagine\Gd\Imagine(); $wm = $imagine->open(__DIR__ . '/images/watermark.png'); $size = $image->getSize(); $wmSize = $wm->getSize(); list($x, $y) = explode(' ', $options); if (!is_numeric($x)) { $x = ($x == 'right') ? ($size->getWidth() - $wmSize->getWidth()) : 0; if ($x < 0) $x = 0; } if (!is_numeric($y)) { $y = ($y == 'bottom') ? ($size->getHeight() - $wmSize->getHeight()) : 0; if ($y < 0) $y = 0; } $point = new \Imagine\Image\Point($x, $y); return $image->paste($wm, $point); } public function grayscale(\Imagine\Image\ImageInterface $image, $options, $allOptions) { $image->effects()->grayscale(); return $image; } public function sepia(\Imagine\Image\ImageInterface $image, $options, $allOptions) { $image->effects() ->grayscale() ->colorize(new \Imagine\Image\Color('#643200')); return $image; } }

3. मुख्य धारा से छवि प्रसंस्करण को हटाना

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

4. ब्राउज़रों में एक साथ कनेक्शन की सीमा को दरकिनार करना

HTTP 1.1 मानक के अनुसार, एक ब्राउज़र एक ही समय में एक ही डोमेन से 2 से अधिक अनुरोध लोड नहीं कर सकता है। समाधान? एक ही समय में स्टैटिक्स ( कुकलेस डोमेन ) के लिए कई उप डोमेन बनाएं और इस तथ्य के कारण ट्रैफ़िक को बचाया जाएगा कि अतिरिक्त कुकीज़ प्रसारित नहीं की जाएंगी।

कोड में, आप 3 विकल्पों में से एक का उपयोग कर सकते हैं:

 //           //    -,  `php -S localhost:8080` \Bazalt\Thumbs\Image::initStorage(__DIR__ . '/static', '/thumb.php?file=/static'); //       - \Bazalt\Thumbs\Image::initStorage(__DIR__ . '/static', '/static'); //      -  cookieless  \Bazalt\Thumbs\Image::initStorage(__DIR__ . '/static', 'http://img%s.example.com/static'); //   %s     0x0-0xF    // img0.example.com, img1.example.com, ..., imge.example.com, imgf.example.com

एक बड़ी परियोजना एक सीडीएन विकल्प पर विचार कर रही है, लेकिन यह इस लेख के दायरे से परे है।

5. यूआरएल को स्पष्ट रूप से आकार मापदंडों को पारित करके सर्वर को बंद करने की संभावना से बचें

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

6. कैशिंग काम के परिणाम

यदि कोई पहले से ही नहीं है, तो थंब फ़ंक्शन केवल एक कॉन्फ़िगरेशन फ़ाइल उत्पन्न करता है। इस फ़ाइल का नाम प्रसंस्करण मापदंडों के हैश और छवि फ़ाइल नाम से गणना की जाती है। कॉन्फ़िगरेशन फ़ाइल का नाम थंबनेल प्लस के नाम से कुछ विस्तार से मेल खाता है। उदाहरण के लिए, यदि पता " /static/d1/7e/d17e248758722c42d8c88d21d8b538d7.jpg " एक थंबनेल होना चाहिए, तो कॉन्फ़िगरेशन फ़ाइल को " /static/d1/7e/d17e248758722c42d8c88d21d8b538d7.jpg.pre " पता होना चाहिए।
जब ब्राउज़र थंबनेल के लिए दूसरा अनुरोध भेजता है तो प्रसंस्करण पहले से ही किया जाता है।

Nginx के लिए सेटिंग्स:

 location /static/ { root /www/public; try_files $uri /thumb.php?file=$uri; }

अपाचे के लिए:

 RewriteCond %{REQUEST_URI} ^(/static/) RewriteCond %{SCRIPT_FILENAME} !-f RewriteRule ^(.*)$ thumb.php?file=$1 [L]

जैसा कि आप सेटिंग्स से देख सकते हैं, यदि फ़ाइल पहले से मौजूद है, तो वेब सर्वर इसे सीधे देता है, और यदि नहीं, तो thumb.php फ़ाइल को कॉल किया जाएगा, जो एक थंबनेल बनाएगा और इसे डिस्क पर बचाएगा।
ये सेटिंग्स सही नहीं हैं, सिर्फ विचार दिखाने के लिए।

नतीजतन, हमारे पास इस तरह के लगातार काम का एक सरल समाधान है, मैंने उन सभी नुकसानों का वर्णन करने की कोशिश की, जो मुझे सामना करना पड़ा, अगर मैंने कुछ याद किया, तो मैं टुकड़े-टुकड़े की टिप्पणियों के लिए आभारी रहूंगा।

परिणाम कैशिंग के साथ मक्खी पर छवि प्रसंस्करण के लिए एक सरल समाधान