Slide 1

Slide 1 text

Bitmap͸ා͘ͳ͍ Wasabeef

Slide 2

Slide 2 text

About Me wasabeef CyberAgent, Inc.

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

OutOfMemoryError…

Slide 5

Slide 5 text

About Bitmap

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

About BitmapFactory.Options

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

About Bitmap.Config

Slide 13

Slide 13 text

ARGB_8888 • 32bit • Alpha, Red, Green, Blue ֤8bit • Default

Slide 14

Slide 14 text

ARGB_4444 • 16bit • Alpha, Red, Green, Blue ֤4bit • Deprecated in API 13

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Open Source

Slide 18

Slide 18 text

Open Source • Universal Image Loader • Picasso • Glide • Fresco • Volley

Slide 19

Slide 19 text

Picasso by Square

Slide 20

Slide 20 text

Picasso • Image Library • Transformation • Cache • Save the world

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Picasso .fit()

Slide 23

Slide 23 text

Picasso .centerCrop()

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Glide by Bump (sjudd)

Slide 26

Slide 26 text

Glide • Picasso like • Video, Gif support • Sampling support • BitmapPool • Thumbnail change the world

Slide 27

Slide 27 text

Glide Glide.with(this) .load(“http://i.imgur.com/4rBHm4Q.jpg”) .transform(new CircleTransform()) .into(imageView); #

Slide 28

Slide 28 text

.fitCenter() Glide

Slide 29

Slide 29 text

.centerCrop() Glide

Slide 30

Slide 30 text

.override(800, 800) Glide

Slide 31

Slide 31 text

Picasso and Glide Transform

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

RoundedCorners

Slide 34

Slide 34 text

CropCircle

Slide 35

Slide 35 text

BitmapShader

Slide 36

Slide 36 text

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; }

Slide 37

Slide 37 text

Blur

Slide 38

Slide 38 text

RenderScript

Slide 39

Slide 39 text

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; }

Slide 40

Slide 40 text

ColorFilter

Slide 41

Slide 41 text

ColorFilter

Slide 42

Slide 42 text

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; }

Slide 43

Slide 43 text

Open Source

Slide 44

Slide 44 text

Transform • picasso-transformations • glide-transformations wasabeef

Slide 45

Slide 45 text

GPUImage for Android CyberAgent, Inc.

Slide 46

Slide 46 text

GPUImage for Android • iOSͷGPUImageΛݩʹAndroidʹҠ২ • ImageViewʹରͯ͠FilterΛ͔͚ΕΔ • Filterͷछྨ͸໿70ݸ • PhotoshopͷACVʹରԠ • API 8 (2.2+)

Slide 47

Slide 47 text

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); }

Slide 48

Slide 48 text

Fresco by Facebook

Slide 49

Slide 49 text

Fresco • streaming of progressive JPEGs • Gif, WebP support • Loading customization

Slide 50

Slide 50 text

Fresco

Slide 51

Slide 51 text

OutOfMemoryError

Slide 52

Slide 52 text

࠷ޙͷखஈ

Slide 53

Slide 53 text

android:largeHeap=“true"

Slide 54

Slide 54 text

largeHeap == true? • Google+ • Amazon Kindle • Facebook • Hulu • Tumblr • Youtube • Ameba Ownd

Slide 55

Slide 55 text

Wasabeef

Slide 56

Slide 56 text

Thanks.