Bitmapってどういうことが出来るか ・Picasso, GlideでのTransformationについて ・Frescoとは？ ・GPUImage for Android
Bitmapා͘ͳ͍Wasabeef
View Slide
About MewasabeefCyberAgent, Inc.
Ͳ͏ߟ͑ͯBitmapා͍Ͱ͢
OutOfMemoryError…
About Bitmap
Bitmap• ը૾Λѻ͏جຊతͳAPI• BitmapFactoryͰΦϒδΣΫτੜ͢Δ• OutOfMemoryΛى͜͢ݪҼʹͳΓ͍͢
Supported Image FormatsFormat Encoder Decoder Details File TypeJPEG ! ! Base+Progressive .jpgGIF ! .gifPNG ! ! .pngBMP ! .bmpWebP!#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
PicassoPicasso.with(this).load(“http://i.imgur.com/4rBHm4Q.jpg”).transform(new CircleTransform()).into(imageView);
Picasso.fit()
Picasso.centerCrop()
Picasso.resize(800,800).centerInside()
Glide byBump (sjudd)
Glide• Picasso like• Video, Gif support• Sampling support• BitmapPool• Thumbnail change the world
GlideGlide.with(this).load(“http://i.imgur.com/4rBHm4Q.jpg”).transform(new CircleTransform()).into(imageView);#
.fitCenter()Glide
.centerCrop()Glide
.override(800, 800)Glide
Picasso and GlideTransform
Transformը૾ΛಡΈࠐΜͰImageViewʹදࣔ͢Δલʹը૾Λมܗͤ͞Δ
RoundedCorners
CropCircle
BitmapShader
BitmapShaderpublic 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
RenderScriptScriptIntrinsicBlurpublic 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
ColorFilterpublic 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;}
Transform• picasso-transformations• glide-transformationswasabeef
GPUImage for AndroidCyberAgent, Inc.
GPUImage for Android• iOSͷGPUImageΛݩʹAndroidʹҠ২• ImageViewʹରͯ͠FilterΛ͔͚ΕΔ• Filterͷछྨ70ݸ• PhotoshopͷACVʹରԠ• API 8 (2.2+)
GPUImage for Android@Overridepublic 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
Frescoandroid: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.
wasabeef
dalinaum
squer
pocke
manfredsteyer
sagawa23
yui_knk
konpay
tmokmss
progate
totokit4
pineapplecandy
mraible
paulrobertlloyd
shpigford
samanthasiow
lynnandtonic
samlambert
chriscoyier
rocio
62gerente
marcelosomers
addyosmani
revolveconf
tenderlove