Android पर प्रभावी ब्लर लिखना

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

और इसलिए, क्यों?

Google Play Store पर प्रदर्शित होने वाले अनुप्रयोगों में बढ़ते प्रभाव को ध्यान से देख सकते हैं। कम से कम अद्भुत Muzei आवेदन + RomanNurik या उसी याहू मौसम से लें। इन अनुप्रयोगों को देखते हुए, आप देख सकते हैं कि धब्बा के कुशल संचालन के साथ, आप बहुत प्रभावशाली परिणाम प्राप्त कर सकते हैं।



लेखों की धुंधला चित्र श्रृंखला ने मुझे इस लेख को लिखने के लिए प्रेरित किया, इसलिए लेख का पहला भाग बहुत समान होगा। वास्तव में, मैं थोड़ा गहरा खुदाई करने की कोशिश करूंगा।

यहाँ कुछ हम प्राप्त करने की कोशिश करेंगे:

चलिए शुरू करते हैं

पहले मैं यह दिखाना चाहता हूं कि हम किसके साथ काम कर रहे हैं। मैंने 1 गतिविधि बनाई जिसके भीतर ViewPager स्थित है। ViewPager टुकड़ों के माध्यम से फ़्लिप करता है। प्रत्येक टुकड़ा धब्बा का एक अलग कार्यान्वयन है।
यह मेरा main_layout.xml कैसा दिखता है:

 <android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/pager" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.paveldudka.MainActivity" /> 

और यहाँ वह है जो खंड लेआउट (fragment_layout.xml) जैसा दिखता है:

 <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:id="@+id/picture" android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/picture" android:scaleType="centerCrop" /> <TextView android:id="@+id/text" android:gravity="center_horizontal" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="My super text" android:textColor="@android:color/white" android:layout_gravity="center_vertical" android:textStyle="bold" android:textSize="48sp" /> <LinearLayout android:id="@+id/controls" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#7f000000" android:orientation="vertical" android:layout_gravity="bottom"/> </FrameLayout> 

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

हमारा लक्ष्य पाठ की पृष्ठभूमि को धुंधला करना है, जिससे इस पर जोर दिया जा सके। यहाँ एक सामान्य सिद्धांत है कि हम यह कैसे करेंगे:

• छवि से, उस अनुभाग को काट दें जो सीधे TextView के पीछे स्थित है
• धो लें
• परिणामी परिणाम TextView की पृष्ठभूमि के रूप में सेट किया गया है

Renderscript

संभवतः इस सवाल का सबसे लोकप्रिय उत्तर "एंड्रॉइड में एक छवि को कैसे जल्दी से धुंधला करना है" रेंडरस्क्रिप्ट है। यह एक बहुत शक्तिशाली छवि उपकरण है। इसकी स्पष्ट जटिलता के बावजूद, इसके कई हिस्सों का उपयोग करना बहुत आसान है। सौभाग्य से, कलंक उन हिस्सों में से एक है।

 public class RSBlurFragment extends Fragment { private ImageView image; private TextView text; private TextView statusText; @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_layout, container, false); image = (ImageView) view.findViewById(R.id.picture); text = (TextView) view.findViewById(R.id.text); statusText = addStatusText((ViewGroup) view.findViewById(R.id.controls)); applyBlur(); return view; } private void applyBlur() { image.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() { @Override public boolean onPreDraw() { image.getViewTreeObserver().removeOnPreDrawListener(this); image.buildDrawingCache(); Bitmap bmp = image.getDrawingCache(); blur(bmp, text); return true; } }); } @TargetApi(Build.VERSION_CODES.JELLY_BEAN_MR1) private void blur(Bitmap bkg, View view) { long startMs = System.currentTimeMillis(); float radius = 20; Bitmap overlay = Bitmap.createBitmap((int) (view.getMeasuredWidth()), (int) (view.getMeasuredHeight()), Bitmap.Config.ARGB_8888); Canvas canvas = new Canvas(overlay); canvas.translate(-view.getLeft(), -view.getTop()); canvas.drawBitmap(bkg, 0, 0, null); RenderScript rs = RenderScript.create(getActivity()); Allocation overlayAlloc = Allocation.createFromBitmap( rs, overlay); ScriptIntrinsicBlur blur = ScriptIntrinsicBlur.create( rs, overlayAlloc.getElement()); blur.setInput(overlayAlloc); blur.setRadius(radius); blur.forEach(overlayAlloc); overlayAlloc.copyTo(overlay); view.setBackground(new BitmapDrawable( getResources(), overlay)); rs.destroy(); statusText.setText(System.currentTimeMillis() - startMs + "ms"); } @Override public String toString() { return "RenderScript"; } private TextView addStatusText(ViewGroup container) { TextView result = new TextView(getActivity()); result.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT)); result.setTextColor(0xFFFFFFFF); container.addView(result); return result; } } 

आइए देखें कि यहां क्या होता है:

• एक टुकड़ा बनाते समय - एक लेआउट बनाया जाता है, मेरे "सेवा पैनल" में एक TextView जोड़ा जाता है (मैं इसे एल्गोरिथ्म की गति प्रदर्शित करने के लिए उपयोग करूंगा) और धुंधला शुरू होता है
• applyBlur() अंदर applyBlur() मैं onPreDrawListener रजिस्टर करता onPreDrawListener । मैं ऐसा इसलिए करता हूं क्योंकि इस फ़ंक्शन को कॉल करने के दौरान, मेरे UI तत्व अभी तैयार नहीं हैं, इसलिए धुंधला होने के लिए बहुत कुछ नहीं है। इसलिए, मुझे उस क्षण की प्रतीक्षा करने की आवश्यकता है जब मेरा लेआउट मापा जाएगा और खींचने के लिए तैयार होगा। पहला फ्रेम तैयार होने से ठीक पहले यह कॉलबैक कहा जाएगा।
• onPreDraw() अंदर onPreDraw() पहली चीज जो मैं आमतौर पर करता हूं onPreDraw() है रिटर्न वैल्यू को सच में बदलना। तथ्य यह है कि आईडीई डिफ़ॉल्ट रूप से false उत्पन्न करता है, जिसका अर्थ है कि पहले फ्रेम का प्रतिपादन छोड़ दिया जाएगा। इस मामले में, मुझे पहले फ्रेम में दिलचस्पी है, इसलिए हमने इसे सच करने के लिए सेट किया है।
• इसके बाद, हम अपने कॉलबैक को हटा देते हैं - हम onPreDraw इवेंट्स में रुचि नहीं रखते हैं
• अब मुझे अपने इमेज व्यू से बिटमैप को प्राप्त करने की आवश्यकता है। उसे एक ड्राइंग कैश बनाएं और उसे दूर ले जाएं
• ठीक है, वास्तव में, धुंधला। इस प्रक्रिया पर अधिक विस्तार से विचार करें।

मैं तुरंत ध्यान देना चाहता हूं कि इस कोड में कई नुकसान हैं, जिन्हें याद रखना चाहिए:

• यह कोड लेआउट परिवर्तनों के साथ "ओवरराइट" नहीं करता है। एक अच्छे तरीके से, आपको onGlobalLayoutListener को पंजीकृत करना होगा और इस घटना के प्राप्त होने पर एल्गोरिथ्म को पुनः आरंभ करना होगा
• ब्लर मुख्य धागे में किया जाता है। अपने अनुप्रयोगों में ऐसा करने की कोशिश न करें - इस तरह का ऑपरेशन एक अलग थ्रेड में "अनलोड" होना चाहिए ताकि यूआई को अवरुद्ध न करें। AsyncTask या कुछ इसी तरह का काम करेगा।

वापस blur() :

• एक खाली बिटमैप बनाया गया है, हमारे TextView के अनुरूप आकार - यहां हम अपनी पृष्ठभूमि के एक टुकड़े की नकल करते हैं
• एक कैनवस बनाएं ताकि आप इस बिटमैप में आकर्षित हो सकें
• हम समन्वय प्रणाली को उस स्थिति में स्थानांतरित कर देते हैं जहां TextView स्थित है
• पृष्ठभूमि का एक टुकड़ा ड्रा
• इस बिंदु पर, हमारे पास एक बिटमैप है जिसमें पृष्ठभूमि का एक टुकड़ा होता है जो सीधे टेक्स्ट व्यू के पीछे स्थित होता है
• एक रेंडरस्क्रिप्ट ऑब्जेक्ट बनाएं
• हमारे बिटमैप को उस संरचना में कॉपी करें जिसके साथ रेंडरस्क्रिप्ट काम करता है।
• एक ब्लर स्क्रिप्ट बनाएं (ScriptIntrinsicBlur)
• ब्लर पैरामीटर सेट करें (मेरे मामले में, त्रिज्या 20) और स्क्रिप्ट चलाएँ
• परिणाम को वापस हमारे बिटमैप पर कॉपी करें।
• महान, हमारे पास एक धुंधला बिटमैप है - इसे हमारे टेक्स्ट व्यू के लिए पृष्ठभूमि के रूप में सेट करें

यहाँ क्या हुआ:


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

मैं यह भी नोट करना चाहता हूं कि ScriptIntrinsicBlur API> 16 में उपलब्ध है। बेशक, आप रेंडरस्क्रिप्ट सपोर्ट लाइब्रेरी का उपयोग कर सकते हैं, जिससे एपीआई का आवश्यक स्तर कम हो जाएगा।
लेकिन, जैसा कि आप अनुमान लगा सकते हैं, रेंडरस्क्रिप्ट ने अभिसरण नहीं किया है, तो आइए एक विकल्प देखें।

FastBlur

वास्तव में, धुंधलापन पिक्सल के हेरफेर से ज्यादा कुछ नहीं है, इसलिए हमें खुद ही इन पिक्सेल को हेरफेर करने से रोकता है? सौभाग्य से, इंटरनेट पर, सभी प्रकार के धुंधला एल्गोरिदम के कार्यान्वयन की एक बड़ी संख्या उपलब्ध है, इसलिए हमारा कार्य सबसे इष्टतम एक चुनना है।
सभी जानने वाले स्टैकओवरफ़्लो ( या यहीं, यहाँ ) पर, मैं कलंक एल्गोरिथ्म के एक अच्छे कार्यान्वयन के लिए आया था।

देखते हैं कि यह क्या आया। मैं सभी कोड नहीं दूंगा, क्योंकि केवल कलंक () फ़ंक्शन अलग होगा:

 private void blur(Bitmap bkg, View view) { long startMs = System.currentTimeMillis(); float radius = 20; Bitmap overlay = Bitmap.createBitmap((int) (view.getMeasuredWidth()), (int) (view.getMeasuredHeight()), Bitmap.Config.ARGB_8888); Canvas canvas = new Canvas(overlay); canvas.translate(-view.getLeft(), -view.getTop()); canvas.drawBitmap(bkg, 0, 0, null); overlay = FastBlur.doBlur(overlay, (int)radius, true); view.setBackground(new BitmapDrawable(getResources(), overlay)); statusText.setText(System.currentTimeMillis() - startMs + "ms"); } 

और यहाँ परिणाम है:


जैसा कि आप देख सकते हैं, गुणवत्ता को रेंडरस्क्रिप्ट के साथ अंतर को नोटिस करना मुश्किल है। लेकिन प्रदर्शन खराब है - 147ms ! और यह सबसे धीमी एल्गोरिथ्म से दूर है! मुझे गॉस को धुंधला करने की कोशिश करने से भी डर लगता है।

अनुकूलन

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

क्या होगा यदि हम पहले छवि को कम करते हैं, इसे धुंधला करते हैं, और फिर इसे वापस बढ़ाते हैं?

चलो यह कोशिश करो!



और इसलिए, हमारे पास 13ms रेंडरस्क्रिप्ट और 2ms FastBlur हैं। बहुत अच्छा है, यह देखते हुए कि कलंक की गुणवत्ता पिछले परिणामों की गुणवत्ता में तुलनीय है।

आइए कोड पर एक नज़र डालें। मैं केवल FastBlur विकल्प का वर्णन करूंगा रेंडरस्क्रिप्ट के लिए कोड समान होगा (कोड के पूर्ण संस्करण के लिए एक लिंक लेख के अंत में उपलब्ध है):

 private void blur(Bitmap bkg, View view) { long startMs = System.currentTimeMillis(); float scaleFactor = 1; float radius = 20; if (downScale.isChecked()) { scaleFactor = 8; radius = 2; } Bitmap overlay = Bitmap.createBitmap((int) (view.getMeasuredWidth()/scaleFactor), (int) (view.getMeasuredHeight()/scaleFactor), Bitmap.Config.ARGB_8888); Canvas canvas = new Canvas(overlay); canvas.translate(-view.getLeft()/scaleFactor, -view.getTop()/scaleFactor); canvas.scale(1 / scaleFactor, 1 / scaleFactor); Paint paint = new Paint(); paint.setFlags(Paint.FILTER_BITMAP_FLAG); canvas.drawBitmap(bkg, 0, 0, paint); overlay = FastBlur.doBlur(overlay, (int)radius, true); view.setBackground(new BitmapDrawable(getResources(), overlay)); statusText.setText(System.currentTimeMillis() - startMs + "ms"); } 

• scaleFactor निर्धारित करता है कि हम चित्र को कितना कम करेंगे। मेरे मामले में, हम इसे 8 गुना कम कर देंगे। इसके अलावा, यह देखते हुए कि तस्वीर को कम / बढ़ाते समय हम पिक्सेल के शेर के हिस्से को खो देते हैं, हम मुख्य एल्गोरिथ्म के ब्लर रेडियस को सुरक्षित रूप से कम कर सकते हैं। वैज्ञानिक प्रहार से मैं 2x तक कम हो गया
• एक बिटमैप बनाएँ। इस बार यह कम होगा - इस मामले में, 8 बार।
• ध्यान दें कि जब मैं प्रतिपादन करता हूं, तो मैं झंडा FILTER_BITMAP_FLAG सेट करता FILTER_BITMAP_FLAG , जो छवि का आकार बदलने पर चौरसाई करने की अनुमति देगा
• पहले की तरह, हम धब्बा लागू करते हैं, लेकिन अब बहुत छोटी तस्वीर के साथ और एक छोटे त्रिज्या के साथ, जो हमें एल्गोरिथ्म को गति देने की अनुमति देता है
• हमने इस छोटी सी तस्वीर को TextView की पृष्ठभूमि के रूप में रखा है - यह अपने आप बढ़ेगी।

दिलचस्प रूप से पर्याप्त है, रेंडरस्क्रिप्ट ने FastBlur की तुलना में धीमी गति से काम किया। यह इस तथ्य के कारण हुआ कि हमने आवंटन और वापस बिटमैप की प्रतिलिपि बनाने में समय बचाया।

नतीजतन, हमें एंड्रॉइड पर चित्रों को धुंधला करने का एक बहुत तेज़ तरीका मिला

उपयोगी लिंक:
GitHub पर इस लेख के लिए स्रोत
लेख का पूर्वज
धब्बा एल्गोरिदम पर एसओ पर पोस्ट करें