android下webp的學習和使用

最近需求要給app做個漂亮、大氣的引導頁，找UI溝通，UI激情滿滿，不久就發過來了，四張圖片，果然很漂亮，可一看大小，嚇尿 4M多，趕快再溝通，不但要漂亮、大氣，還要小，越小越好，最終經過多次溝通，發過來四張圖片，總共400多K，說不能再小了，再小就影響顯示效果了。

產品過來說，app怎麼這麼大了，要小，越小越好，馬上要地推了，越小地推越容易，成本也越低。

沒辦法只有開發這邊想辦法了，網上搜了下，發現圖片還有webp模式，谷歌推薦，國內很多app也都采用了，下載轉化工具iSparta ,把四張引導圖 轉化後果然小多了，由原來的400多k減少到不到100K，關鍵是效果幾乎沒受到影響，至少肉眼看起來沒明顯失真，於是果斷把大於100K的圖都轉化成webp顯示。

1 、首先需要把目標圖片轉化成webp格式的圖片，使用iSparta轉化，很方便快捷，轉化完把原圖刪除，把轉化後的後綴為.webp的圖片拷貝到項目原圖的位置

2、加載so文件，官方提供的libwebp.jia包

         public static Bitmap webpToBitmap(byte[] encoded) {

		int[] width = new int[] { 0 };
		int[] height = new int[] { 0 };
		byte[] decoded = libwebp.WebPDecodeARGB(encoded, encoded.length, width,
				height);

		int[] pixels = new int[decoded.length / 4];
		ByteBuffer.wrap(decoded).asIntBuffer().get(pixels);

		return Bitmap.createBitmap(pixels, width[0], height[0],
				Bitmap.Config.ARGB_8888);

	}

	public static byte[] streamToBytes(InputStream in) {
		ByteArrayOutputStream out = new ByteArrayOutputStream(1024);
		byte[] buffer = new byte[1024];
		int len = -1;
		try {
			while ((len = in.read(buffer)) >= 0) {
				out.write(buffer, 0, len);
				out.flush();
			}
		} catch (java.io.IOException e) {
			e.printStackTrace();
		} finally {
			try {
				in.close();
			} catch (Exception e) {
				e.printStackTrace();
			}
		}
		return out.toByteArray();
	}

3、 android4.0以上已經支持webp格式圖片，即4.0以上我們可以像使用其它格式圖片一樣直接使用，4.0以下的需做特別處理 ，封裝使用的方法：

       public static Drawable getDrawable(int id,Context context){
		 return new BitmapDrawable(getBitmap(id, context));
	}
	
	public static Bitmap getBitmap(int resId ,Context context){
		InputStream rawImageStream = context.getResources().openRawResource(resId);
		byte[] data = com.dingji.webpdemo.WebpUtils.streamToBytes(rawImageStream);
	    return com.dingji.webpdemo.WebpUtils.webpToBitmap(data);
	}
	/**
	 * 賦值webp
	 * @param id
	 * @param imageview
	 * @param context
	 */
	public static void setWebPValue(int resId,ImageView iv,Context context){
		if(Build.VERSION.SDK_INT
 
 4、項目裡在需要的地方直接調用
 
      ImageView iv=(ImageView) view.findViewById(R.id.guideImg);
      WebpUtils.setWebPValue(R.drawable.guide_img_one, iv, context);


 
使用webp的優點： 使用方便，當然最重要的是 能在不失真的情況下大幅降低圖片的大小
缺點： 圖片變小肯定是有代價的，那就是加載耗時增加，不過測試增加的時間是 幾十毫秒級別的，基本在承受范圍內。