Django में छवियों के लिए दृश्य प्रभाव लागू करें

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

• CamanJS मोबाइल ब्राउज़रों (सफारी, विशेष रूप से क्रोम) द्वारा समर्थित नहीं है;
• CamanJS ब्राउज़र में मेमोरी लीक करता है (विशेषकर बड़ी छवियों के साथ काम करते समय);
• फ़िल्टर लागू होने पर CamanJS फ़ायरफ़ॉक्स में बहुत धीमा है।

फिर सर्वर साइड पर CamanJS का उपयोग करने का प्रयास किया गया। परिणाम फिर असंतोषजनक था:

• रूपांतरण के बाद, छवि 3-4 बार बढ़ गई थी;
• छवि रूपांतरण जल्दी नहीं हुआ।

नतीजतन, मुझे पूरी तरह से CamanJS को छोड़ना पड़ा।

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

सबसे पहले, http://jqmagick.imagemagick.org पर जाएं , एक तस्वीर अपलोड करें, वांछित प्रभाव का चयन करें, इसके लिए मापदंडों का चयन करें। यदि सब कुछ सुंदर है और सब कुछ हमारे अनुरूप है, तो "विकल्प" अनुभाग के निचले क्षेत्र से स्क्रिप्ट को निष्पादित करने के लिए उदाहरण कमांड को कॉपी करें (डिफ़ॉल्ट रूप से, jmmagick इंटरफ़ेस का निचला दायां भाग)। उदाहरण के लिए:

bash scripts/vintage1.sh -b 0 -c 35 -s roundrectangle -T torn -I grunge -C white output/8526-603.jpg output/3347-9458.jpg 

जिस स्क्रिप्ट में हम रुचि रखते हैं, उसे विंटेज1.श कहा जाता है। हम http://www.fmwconcepts.com/imagemagick पर जाते हैं, आवश्यक स्क्रिप्ट ढूंढते हैं, इसे डाउनलोड करते हैं और "निष्पादन के लिए" बॉक्स की जांच करना नहीं भूलते हैं। और इस तरह हम उन सभी प्रभावों का चयन करते हैं जिनकी हमें आवश्यकता है।
अब सॉफ्टवेयर कार्यान्वयन के लिए सब कुछ तैयार है।

तो, कार्य:

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

सर्वर पर छवि अपलोड करें

छवि को सर्वर पर अपलोड करने के लिए, हमने filereader.js js लाइब्रेरी का उपयोग किया। उपयोग और विन्यास उदाहरण इस पुस्तकालय के लिए विनिर्देशन में पाया जा सकता है। हमने फ़ाइल को ब्राउज़र के FileReader ऑब्जेक्ट पर पूरी तरह से अपलोड किए जाने के बाद XMLHttpRequest ऑब्जेक्ट की विधि () विधि का उपयोग करके फ़ाइल को सीधे भेजने को लागू किया। ऐसा करने के लिए, "लोड" विकल्प को परिभाषित करें:

 var opts = { // … load: function(e, file) { var xhr = new XMLHttpRequest(); xhr.open('POST', '{% url upload_file %}', true); xhr.onload = function() { if (this.status == 200) { //        var resp = JSON.parse(this.response); //        (    ) filter_image = resp['image']; filter_thumb = resp['thumb']; } }; xhr.send(file); }, //… }; 

सर्वर पर, हम अपलोड की गई छवि को स्वीकार करते हैं, पूर्वावलोकन के लिए एक प्रतिलिपि बनाते हैं, और पूर्वावलोकन में तत्व की src विशेषता को भरने के लिए मूल छवि का नाम और क्लाइंट के लिए पूर्वावलोकन का नाम वापस करते हैं।

 import os import datetime from PIL import Image try: from cStringIO import StringIO except ImportError: from StringIO import StringIO import simplejson as json from django.http import HttpResponse from django.conf import settings def upload_file(request): max_size = (2560, 2048) #      thumb_size = (325, 325) #     f_data = request.body fake_file = StringIO() fake_file.write(f_data) fake_file.seek(0) img = Image.open(fake_file) img.thumbnail(max_size, Image.ANTIALIAS) #     tmp_dir = settings.TEMP_IMG_DIR #         if not os.path.exists(tmp_dir): os.makedirs(tmp_dir) #        inner_dir_name = datetime.datetime.now().strftime('%d.%m.%Y') inner_dir = os.path.abspath(os.path.join(tmp_dir, inner_dir_name)) if not os.path.exists(inner_dir): os.makedirs(inner_dir) tmp_file_name = generate_tmp_file_name() #      thumb_tmp_file_name = 'thumb_' + tmp_file_name #     output = os.path.abspath(os.path.join(inner_dir, tmp_file_name)) output_thumb = os.path.abspath(os.path.join(inner_dir, thumb_tmp_file_name)) if not img.mode == 'RGB': img = img.convert('RGB') img.save(output, "JPEG") #      jpeg    img.thumbnail(thumb_size, Image.ANTIALIAS) img.save(output_thumb, "JPEG") #     to_response = json.dumps({ 'image': ''.join([settings.MEDIA_URL, '/'.join([settings.TEMP_IMG_DIR_NAME, innder_dir_name, tmp_file_name])]), 'thumb': ''.join([settings.MEDIA_URL, '/'.join([settings.TEMP_IMG_DIR_NAME, innder_dir_name, thumb_tmp_file_name])]), }) return HttpResponse(to_response, mimetype="application/json") 

TEMP_IMG_DIR को स्वयं सेटिंग में निम्नानुसार परिभाषित किया गया है:

 #      TEMP_IMG_DIR = os.path.abspath(os.path.join(MEDIA_ROOT, 'temp_img')) 

एक छवि पर प्रभाव लागू करना

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

 function setFilter(filter_name) { result_filter = filter_name $.ajax({ url: '{% url set_filter %}', method: 'POST', data: { 'img_path': filter_thumb, //     'filter_name': filter_name //    }, success: function(response) { $('#result_img').attr('src', response); //   } }) } 

सर्वर की ओर से, हम प्रभावों को लागू करने के लिए आदेशों का निर्धारण करते हैं और उन्हें फिल्टर के नामों से तुलना करते हैं; यहां एक शब्दकोश का उपयोग करना सुविधाजनक है:

 FILTERS_COMMAND = { 'f1': "bash_scripts/colortemp.sh -t 10950 {file_name} {output}", 'f2': "bash_scripts/colortemp.sh -t 5736 {file_name} {output}", # … 'f8': "bash_scripts/colorfilter.sh -c sepia -m 1 -d 28 {file_name} {output}", 'f9': "bash_scripts/colorfilter.sh -c underwater -m 1 -d 20 {file_name} {output}" } 

सर्वर साइड इफेक्ट फ़ंक्शन:

 import os import sys import subprocess def apply_filter(img_path, filter_name, output=None): if output is None: output_file_name = ''.join([filter_name, '_', os.path.basename(img_path)]) output_file = os.path.abspath(os.path.join(img_path.replace(os.path.basename(img_path), ''), output_file_name)) if os.path.exists(output_file): return output_file else: output_file = output command = FILTERS_COMMAND[filter_name] #  bash,  ,     : command = command.replace('(', '\(').replace(')', '\)') command = command.format(file_name=img_path, output=output_file) subprocess.check_output(command, shell=True, stderr=subprocess.STDOUT) return output_file 

Apply_filter फ़ंक्शन set_filter हैंडलर को कॉल करता है, जो 2 तर्क लेता है: छवि का पथ और फ़िल्टर का नाम, और परिवर्तित छवि का पथ देता है।

उपयोगकर्ता द्वारा वांछित प्रभाव निर्धारित किए जाने के बाद, वह सेव बटन पर क्लिक करता है और set_filter फ़ंक्शन को कॉल किया जाता है, मूल छवि के लिए पहले से सहेजा गया मार्ग और परिणामस्वरूप प्रभाव को एक तर्क के रूप में पारित किया जाता है।
अंत में, मैं एक स्क्रीन संलग्न करूँगा कि यह सब हमारे साथ कैसा दिखता है: