1. 程式人生 > >Android 分享微信小程式之圖片優化

Android 分享微信小程式之圖片優化

      小菜上週接入了微信分享小程式的入口,基本功能實現都沒問題,有需要的朋友可以瞭解一下 Android 分享微信小程式失敗二三事,雖然功能都正常,但整體測試發現圖片展示效果不佳。於是小菜整理了一個簡單的小方法處理一下圖片!

      微信規定,分享小程式展示的圖片應該在 128KB 以內,同時圖片預設展示比例為 5:4,這樣小菜預設的圖很多是豎直的圖,只會展示一部分。

遮擋部分圖片

規定

      小菜嘗試了圖片的【等比壓縮】【非等比壓縮】和【不壓縮】,效果依舊不合適,圖片所佔位置預設以橫向方向填充滿分享出的佈局。於是小菜決定重新用 Canvas

繪製一張圖,將所要展示的圖片居中展示,整理方法如下:

public static Bitmap drawWXMiniBitmap(Bitmap bitmap, int width, int height) {
    Bitmap mBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
    // 用這個Bitmap生成一個Canvas,然後canvas就會把內容繪製到上面這個bitmap中
    Canvas mCanvas = new Canvas(mBitmap);
    // 繪製畫筆
    Paint mPicturePaint = new Paint();
    // 繪製背景圖片
    mCanvas.drawBitmap(mBitmap, 0.0f, 0.0f, mPicturePaint);
    // 繪製圖片的寬、高
    int width_head = bitmap.getWidth();
    int height_head = bitmap.getHeight();
    // 繪製圖片--保證其在水平方向居中
    mCanvas.drawBitmap(bitmap, (width - width_head) / 2, (height - height_head) / 2,
        mPicturePaint);
    // 儲存繪圖為本地圖片
    mCanvas.save();
    mCanvas.restore();
    return mBitmap;
}

      小菜測試時發現,很多圖片的尺寸大小和寬高比並非固定的,為了適配整體展示效果,當寬高比小於1時,根據圖片高度來計算整體繪製 Bitmap 寬,Bitmap 可以根據需求展示相應的本地資源圖或網路圖,寬高可以直接設定 5:4 大小,小菜測試 width = 300; height = 240 整體效果較為合適。大家可以根據個人需求自定義圖片樣式。

Bitmap bitmap = BitmapUtil.drawWXMiniBitmap(bitmap, bitmap.getHeight() * 5 / 4, bitmap.getHeight());
if (BitmapUtil.isOverSize(bitmap, 128)) {
    bitmap = Utils.resizeBitmap(bitmap, 300, 240);
}

      Tips: 繪製完成之後的圖會比原圖大,所以需要先繪製圖片,再判斷圖片是否超過 128KB。若超過 128KB 需要進行壓縮,公共的方法暫時就省略啦!


      內容很少,有問題的地方還請多多指教!