Android - Bitmapは怖くない

Android - Bitmapは怖くない

Bitmapってどういうことが出来るか
・Picasso, GlideでのTransformationについて
・Frescoとは?
・GPUImage for Android

6dd0483f1353a4a359e92633cfd65c64?s=128

Daichi Furiya (Wasabeef)

April 25, 2015
Tweet

Transcript

  1. Bitmap͸ා͘ͳ͍ Wasabeef

  2. About Me wasabeef CyberAgent, Inc.

  3. Ͳ͏ߟ͑ͯ΋Bitmap͸ා͍Ͱ͢

  4. OutOfMemoryError…

  5. About Bitmap

  6. Bitmap • ը૾Λѻ͏جຊతͳAPI • BitmapFactoryͰΦϒδΣΫτੜ੒͢Δ • OutOfMemoryΛى͜͢ݪҼʹͳΓ΍͍͢

  7. 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
  8. About BitmapFactory.Options

  9. inJustDecodeBounds • Bitmapͷϝλ৘ใ͚ͩऔಘ • ͋Β͔͡Ίը૾αΠζ͚ͩऔಘ͢Δ৔߹ͳͲ

  10. inSampleSize • σϑΥϧτ͸1 • 2ʹઃఆ͢Δͱ1/2αΠζ • 4ʹઃఆ͢Δͱ1/4αΠζ • BitmapʹFilter͔͚Δ࣌ʹͱͯ΋༗ޮ

  11. inPreferredConfig • BitmapΛಡΈࠐΉFormatΛࢦఆ͢Δ • σϑΥϧτ͸ Bitmap.Config.ARGB_8888

  12. About Bitmap.Config

  13. ARGB_8888 • 32bit • Alpha, Red, Green, Blue ֤8bit •

    Default
  14. ARGB_4444 • 16bit • Alpha, Red, Green, Blue ֤4bit •

    Deprecated in API 13
  15. RGB_565 • 16bit • Alpha஋͕ͳ͍ը૾ʹ͸༗ޮ • ৔߹ʹΑͬͯ͸ARGB_8888ͷ൒෼ۙ͘

  16. ALPHA_8 • 8bit • Alpha஋ͷΈͷ৔߹ʹ༗ޮ

  17. Open Source

  18. Open Source • Universal Image Loader • Picasso • Glide

    • Fresco • Volley
  19. Picasso by Square

  20. Picasso • Image Library • Transformation • Cache • Save

    the world
  21. Picasso Picasso.with(this) .load(“http://i.imgur.com/4rBHm4Q.jpg”) .transform(new CircleTransform()) .into(imageView);

  22. Picasso .fit()

  23. Picasso .centerCrop()

  24. Picasso .resize(800,800).centerInside()

  25. Glide by Bump (sjudd)

  26. Glide • Picasso like • Video, Gif support • Sampling

    support • BitmapPool • Thumbnail change the world
  27. Glide Glide.with(this) .load(“http://i.imgur.com/4rBHm4Q.jpg”) .transform(new CircleTransform()) .into(imageView); #

  28. .fitCenter() Glide

  29. .centerCrop() Glide

  30. .override(800, 800) Glide

  31. Picasso and Glide Transform

  32. Transform ը૾ΛಡΈࠐΜͰImageViewʹ දࣔ͢Δલʹը૾Λมܗͤ͞Δ

  33. RoundedCorners

  34. CropCircle

  35. BitmapShader

  36. 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; }
  37. Blur

  38. RenderScript

  39. 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; }
  40. ColorFilter

  41. ColorFilter

  42. 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; }
  43. Open Source

  44. Transform • picasso-transformations • glide-transformations wasabeef

  45. GPUImage for Android CyberAgent, Inc.

  46. GPUImage for Android • iOSͷGPUImageΛݩʹAndroidʹҠ২ • ImageViewʹରͯ͠FilterΛ͔͚ΕΔ • Filterͷछྨ͸໿70ݸ •

    PhotoshopͷACVʹରԠ • API 8 (2.2+)
  47. 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); }
  48. Fresco by Facebook

  49. Fresco • streaming of progressive JPEGs • Gif, WebP support

    • Loading customization
  50. 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"/>
  51. OutOfMemoryError

  52. ࠷ޙͷखஈ

  53. android:largeHeap=“true"

  54. largeHeap == true? • Google+ • Amazon Kindle • Facebook

    • Hulu • Tumblr • Youtube • Ameba Ownd
  55. Wasabeef

  56. Thanks.