कैनवास पर क्लाइंट-साइड स्प्रिंकलर

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

प्रौद्योगिकी और चुनौती

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

कार्यान्वयन

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

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

हमारे मामले में, सर्वर (रूबी) को बचाने के लिए निम्न कोड का उपयोग किया जाता है:

 encoded_image = params[:image].sub('data:image/png;base64,', '') avatar_io = FilelessIO.new(Base64.decode64(encoded_image)) avatar_io.original_filename = "avatar.png" #  ,    CarrierWave Rails.logger.info "IO: #{avatar_io.inspect}" @user.avatar = avatar_io @user.save 

स्प्रिंकलर बनाते समय, आप निम्न पैरामीटर पास कर सकते हैं:

 $(this).evroneCrop({ preview: '#preview1', //  img,     size: {w: 150, h: 150}, //   ratio: 1, //   ,    -  setSelect: 'center', //    log: true //   }); 

सभी पैरामीटर वैकल्पिक हैं। डेमो ।

setSelect मान center ले सकता center , स्वचालित रूप से छवि के केंद्र और चयन के आकार की गणना कर सकता है, या यह ऑब्जेक्ट {x:0, y: 0, w: 100, h: 100} और चयन को निर्दिष्ट स्थान पर सेट कर सकता है। यदि आपके पास ratio पैरामीटर सेट है, तो आपको setSelect लिए ऑब्जेक्ट में ऊंचाई को प्रसारित करने की आवश्यकता नहीं है।

ratio शून्य से अधिक संख्या लेता है, और उस संख्या के बराबर लंबाई वाले अनुपात को ठीक करता है। उदाहरण के लिए, आप एक वर्ग के लिए 1 या 16/9 के पहलू अनुपात के लिए 16/9 पास कर सकते हैं।

ब्राउज़र समस्याएँ

परिणामी टूल सभी प्रमुख ब्राउज़रों में काम करता है - क्रोम, फ़ायरफ़ॉक्स> 4, सफारी, ओपेरा> 11, आईई 9. योजना में IE8 के लिए फ्लैशबैक में एक कमबैक लिखना शामिल है। यह मूल रूप से Google के एक्वासन का उपयोग करने की योजना बनाई गई थी, लेकिन यह पता चला कि यह हमारे कार्य के लिए आवश्यक विधि प्रदान नहीं करता है जैसे कि toDataURL(); फ्लैश कार्यान्वयन के लिए एक रास्ता है, लेकिन अभी तक हाथ नहीं पहुंचे हैं।

क्रोपालका अभी भी नम है, उदाहरण के लिए, न्यूनतम और अधिकतम आकारों की स्थापना अभी तक लागू नहीं हुई है, लेकिन यह गीथूब , काम करता है, और धीरे-धीरे विकसित हो रहा है।