Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Android - Bitmapは怖くない
Search
Daichi Furiya (Wasabeef)
April 25, 2015
Programming
18k
10
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Android - Bitmapは怖くない
Bitmapってどういうことが出来るか
・Picasso, GlideでのTransformationについて
・Frescoとは?
・GPUImage for Android
Daichi Furiya (Wasabeef)
April 25, 2015
More Decks by Daichi Furiya (Wasabeef)
See All by Daichi Furiya (Wasabeef)
DevFest Tokyo 2025 - Flutter のアプリアーキテクチャ現在地点
wasabeef
6
2.9k
About Flutter Architecture
wasabeef
1
320
2023 Flutter/Dart Summary
wasabeef
0
140
I/O Extended 2023 - Dart と Flutter の新機能
wasabeef
0
240
I/O Extended 2023 - Flutter 活用事例
wasabeef
10
3.1k
What it Takes to be a Flutter Developer
wasabeef
0
260
FlutterKaigi 2022 Keynote
wasabeef
1
730
Flutter Hooks を使ったアプリ開発 / App Development with the Flutter Hooks
wasabeef
2
1.5k
Flutter 2021 の振り返りと今後のアプリ開発に向けて / Looking back on Flutter 2021 and for future app development.
wasabeef
4
2.2k
Other Decks in Programming
See All in Programming
AI時代、エンジニアはどう育つのか -未経験エンジニアの成長を間近で見て考えたこと-
thasu0123
0
220
仕様書を書く前にハーネスを作る - Agent Native開発は「探索を速く、判定を固く」
gotalab555
4
1.6k
AWS DevOps AgentのAzure接続機能を検証して見えた活用法/Use Cases Verified for the AWS DevOps Agent's Azure Connectivity Feature
masakiokuda
1
220
改善しないと、タスクが回らない。 “てんこ盛りポジション” を引き継いだ情シスの、入社3ヶ月の業務改善録
krm963
0
260
torikago - Ruby::Boxで照らすモジュラモノリスの実行境界
se4weed
1
350
AI時代に設計が 最大の生産性レバーになる 意図駆動開発とデータを消さない設計|Don't Delete Your Data or Your Intent — Design as the Deepest Lever in the AI Era
tomohisa
1
730
生成AI導入の「期待外れ」を乗り越える ー 開発フロー改革が目指す、真の組織変革
starfish719
0
4k
関東Kaggler会_NVIDIA_Nemotron_コンペ_振り返り
rick_ds
0
480
Laravelで学ぶ Webアプリケーションチューニング入門/web_application_tuning_101
hanhan1978
4
1.7k
AWS CDK を「作」ってみた 〜フルスクラッチで見えた CDK の裏側〜 / aws-cdk-from-scratch
gotok365
3
2.8k
全PRの83%がAIレビューだけでマージできるようになった開発組織はその後どうなったか
athug
1
1.5k
komatsuna「分散システムにおけるバグ分析手法」
komatsunaqa
0
240
Featured
See All Featured
More Than Pixels: Becoming A User Experience Designer
marktimemedia
3
480
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
12
1.2k
Music & Morning Musume
bryan
47
7.3k
How to Grow Your eCommerce with AI & Automation
katarinadahlin
PRO
1
230
Scaling GitHub
holman
464
140k
Art, The Web, and Tiny UX
lynnandtonic
304
22k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
17k
Navigating the moral maze — ethical principles for Al-driven product design
skipperchong
2
470
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
1.5k
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
aleyda
2
11k
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
akademiya2063
PRO
1
210
<Decoding/> the Language of Devs - We Love SEO 2024
nikkihalliwell
1
280
Transcript
Bitmapා͘ͳ͍ Wasabeef
About Me wasabeef CyberAgent, Inc.
Ͳ͏ߟ͑ͯBitmapා͍Ͱ͢
OutOfMemoryError…
About Bitmap
Bitmap • ը૾Λѻ͏جຊతͳAPI • BitmapFactoryͰΦϒδΣΫτੜ͢Δ • OutOfMemoryΛى͜͢ݪҼʹͳΓ͍͢
Supported Image Formats Format Encoder Decoder Details File Type JPEG
! ! Base+Progressive .jpg GIF ! .gif PNG ! ! .png BMP ! .bmp WebP !# 4.0+ !# 4.0+ .webp
About BitmapFactory.Options
inJustDecodeBounds • Bitmapͷϝλใ͚ͩऔಘ • ͋Β͔͡Ίը૾αΠζ͚ͩऔಘ͢Δ߹ͳͲ
inSampleSize • σϑΥϧτ1 • 2ʹઃఆ͢Δͱ1/2αΠζ • 4ʹઃఆ͢Δͱ1/4αΠζ • BitmapʹFilter͔͚Δ࣌ʹͱͯ༗ޮ
inPreferredConfig • BitmapΛಡΈࠐΉFormatΛࢦఆ͢Δ • σϑΥϧτ Bitmap.Config.ARGB_8888
About Bitmap.Config
ARGB_8888 • 32bit • Alpha, Red, Green, Blue ֤8bit •
Default
ARGB_4444 • 16bit • Alpha, Red, Green, Blue ֤4bit •
Deprecated in API 13
RGB_565 • 16bit • Alpha͕ͳ͍ը૾ʹ༗ޮ • ߹ʹΑͬͯARGB_8888ͷۙ͘
ALPHA_8 • 8bit • AlphaͷΈͷ߹ʹ༗ޮ
Open Source
Open Source • Universal Image Loader • Picasso • Glide
• Fresco • Volley
Picasso by Square
Picasso • Image Library • Transformation • Cache • Save
the world
Picasso Picasso.with(this) .load(“http://i.imgur.com/4rBHm4Q.jpg”) .transform(new CircleTransform()) .into(imageView);
Picasso .fit()
Picasso .centerCrop()
Picasso .resize(800,800).centerInside()
Glide by Bump (sjudd)
Glide • Picasso like • Video, Gif support • Sampling
support • BitmapPool • Thumbnail change the world
Glide Glide.with(this) .load(“http://i.imgur.com/4rBHm4Q.jpg”) .transform(new CircleTransform()) .into(imageView); #
.fitCenter() Glide
.centerCrop() Glide
.override(800, 800) Glide
Picasso and Glide Transform
Transform ը૾ΛಡΈࠐΜͰImageViewʹ දࣔ͢Δલʹը૾Λมܗͤ͞Δ
RoundedCorners
CropCircle
BitmapShader
BitmapShader public static Bitmap shader(Bitmap src) { int width =
src.getWidth(); int height = src.getHeight(); # bitmap = Bitmap.createBitmap(width, height, config); # Canvas canvas = new Canvas(bitmap); Paint paint = new Paint(); paint.setAntiAlias(true); BitmapShader shader = new BitmapShader( src, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP); # paint.setShader(shader); RectF rectF = new RectF(margin, margin, width - margin, height - margin); canvas.drawRoundRect(recfF, radius, radius, paint); # return bitmap; }
Blur
RenderScript
RenderScript ScriptIntrinsicBlur public static Bitmap blur(Bitmap src) { int width
= src.getWidth(); int height = src.getHeight(); # bitmap = Bitmap.createBitmap(width, height, config); RenderScript rs = RenderScript.create(mContext); Allocation alloc = Allocation.createFromBitmap(rs, src); ScriptIntrinsicBlur blur = ScriptIntrinsicBlur.create(rs, alloc.getElement()); blur.setInput(alloc); blur.setRadius(mRadius); blur.forEach(alloc); alloc.copyTo(bitmap); source.recycle(); # return bitmap; }
ColorFilter
ColorFilter
ColorFilter public static Bitmap color(Bitmap src, int color) { int
width = src.getWidth(); int height = src.getHeight(); # bitmap = Bitmap.createBitmap(width, height, config); Canvas canvas = new Canvas(bitmap); Paint paint = new Paint(); paint.setAntiAlias(true); PorterDuffColorFilter filter = new PorterDuffColorFilter(color, PorterDuff.Mode.SRC_ATOP); paint.setColorFilter(filter); canvas.drawBitmap(src, 0, 0, paint); # return bitmap; }
Open Source
Transform • picasso-transformations • glide-transformations wasabeef
GPUImage for Android CyberAgent, Inc.
GPUImage for Android • iOSͷGPUImageΛݩʹAndroidʹҠ২ • ImageViewʹରͯ͠FilterΛ͔͚ΕΔ • Filterͷछྨ70ݸ •
PhotoshopͷACVʹରԠ • API 8 (2.2+)
GPUImage for Android @Override public void onCreate(final Bundle savedInstanceState) {
super.onCreate(savedInstanceState); setContentView(R.layout.activity); # Uri imageUri = Uri.parse(“http://i.imgur.com/4rBHm4Q.jpg”); mGPUImage = new GPUImage(this); mGPUImage.setImage(imageUri); mGPUImage.setFilter(new GPUImageToonFilter()); # mGPUImage.saveToPictures(mGPUImage, “sample.jpg”, null); }
Fresco by Facebook
Fresco • streaming of progressive JPEGs • Gif, WebP support
• Loading customization
Fresco <com.facebook.drawee.view.SimpleDraweeView android:id="@+id/my_image_view" android:layout_width="200dp" android:layout_height="200dp" fresco:fadeDuration="300" fresco:actualImageScaleType="focusCrop" fresco:placeholderImage="@color/wait_color" fresco:placeholderImageScaleType="fitCenter" fresco:failureImage="@drawable/error"
fresco:failureImageScaleType="centerInside" fresco:retryImage="@drawable/retrying" fresco:retryImageScaleType="centerCrop" fresco:progressBarImage="@drawable/progress_bar" fresco:progressBarImageScaleType="centerInside" fresco:progressBarAutoRotateInterval="1000" fresco:backgroundImage="@color/blue" fresco:overlayImage="@drawable/watermark" fresco:pressedStateOverlayImage="@color/red" fresco:roundAsCircle="false" fresco:roundedCornerRadius="1dp" fresco:roundTopLeft="true" fresco:roundTopRight="false" fresco:roundBottomLeft="false" fresco:roundBottomRight="true" fresco:roundWithOverlayColor="@color/corner_color" fresco:roundingBorderWidth="2dp" fresco:roundingBorderColor=“@color/border_color"/>
OutOfMemoryError
࠷ޙͷखஈ
android:largeHeap=“true"
largeHeap == true? • Google+ • Amazon Kindle • Facebook
• Hulu • Tumblr • Youtube • Ameba Ownd
Wasabeef
Thanks.