如何加載100M的圖片卻不撐爆內存,一張 100M 的大圖，如何預防 OOM？

時間 2020-05-20

標籤如何加載 100m 圖片卻不內存一張預防 oom 简体版

原文原文鏈接

記得以前有個問題如何加載100M的圖片卻不撐爆內存如何處理大圖，一張 100M 的大圖，如何預防 OOM？

內容擴展java

1 .圖片的三級緩存中,圖片加載到內存中,若是內存快爆了,會發生什麼？怎麼處理？
2.內存中若是加載一張 500*500 的 png 高清圖片.應該是佔用多少的內存?
3.Bitmap 如何處理大圖，如一張 100M 的大圖，如何預防 OOM？

視頻擴展：android

kotlin(視頻）： https://github.com/xiangjiana...
flutter（視頻）： https://github.com/xiangjiana...
音視頻高手開發從0開始認識（視頻）：
https://github.com/xiangjiana...

內容擴展解答：git

1丶Bitmap 如何處理大圖，如一張 30M 的大圖，如何預防 OOM？
參考回答： 避免 OOM 的問題就須要對大圖片的加載進行管理，主要經過縮放來減少圖片的內存佔用。github

BitmapFactory 提供的加載圖片的四類方法（decodeFile、decodeResource、decodeStream、decodeByteArray）都支持 BitmapFactory.Options 參數，經過 inSampleSize 參數就能夠很方便地對一個圖片進行採樣縮放.
好比一張 10241024 的高清圖片來講。那麼它佔有的內存爲102410244，即 4MB，若是 inSampleSize 爲 2，那麼採樣後的圖片佔用內存只有 512512*4,即 1MB（注意：根據最新的官方文檔指出,inSampleSize 的取值應該老是爲 2 的指數，即一、二、四、8 等等，若是外界輸入不足爲 2 的指數，系統也會默認選擇最接近 2 的指數代替，好比 2）
綜合考慮。經過採樣率便可有效加載圖片，流程以下canvas
- 將 BitmapFactory.Options 的inJustDecodeBounds 參數設爲 true 並加載圖片
- 從 BitmapFactory.Options 中取出圖片的原始寬高信息，它們對應 outWidth 和 outHeight 參數
- 根據採樣率的規則並結合目標 View 的所需大小計算出採樣率 inSampleSize
- 將 BitmapFactory.Options 的inJustDecodeBounds 參數設爲 false，從新加載圖片

二、圖片的三級緩存中,圖片加載到內存中,若是內存快爆了,會發生什麼？怎麼處理？緩存

參考回答：app

首先咱們要清楚圖片的三級緩存是如何的

若是內存足夠時不回收。內存不夠時就回收軟引用對象ide

3丶內存中若是加載一張（500*500 ）的 png 高清圖片.應該是佔用多少的內存?

參考答案：佈局

不考慮屏幕比的話： 佔用內存=500 500 4 = 1000000B ≈0.95MB
考慮屏幕比的的話： 佔用內存= 寬度像素x（inTargetDensity / inDensity） x 高度像素x（inTargetDensity / inDensity）x 一個像素所佔的內存字節大小
inDensity 表示目標圖片的 dpi（放在哪一個資源文件夾下），inTargetDensity 表示目標屏幕的 dpi

Android開發中，有時候會有加載巨圖的需求，如何加載一個大圖而不產生OOM呢，使用系統提供的BitmapRegionDecoder這個類能夠很輕鬆的完成。this

效果圖：

BitmapRegionDecoder：區域解碼器，能夠用來解碼一個矩形區域的圖像，有了這個咱們就能夠自定義一塊矩形的區域，而後根據手勢來移動矩形區域的位置就能慢慢看到整張圖片了。

OK 核心原理就是這麼簡單，不過作起來仍是有一些細節處理，下面就一步一步的完成一個加載大圖，支持拖動查看，雙擊放大，手勢縮放的的自定義View。

第一步，初始化變量

private void init(){
    mOptions = new BitmapFactory.Options();
    //滑動器
    mScroller = new Scroller(getContext());
    //所放器
    mMatrix = new Matrix();
    //手勢識別
    mGestureDetector = new GestureDetector(getContext(),this);
    mScaleGestureDetector = new ScaleGestureDetector(getContext(),this);
}

BitmapFactory.Options咱們很熟悉，用來配置Bitmap相關的參數，好比獲取Bitmap的寬高，內存複用等參數。

GestureDetector用來識別雙擊事件，ScaleGestureDetector用來監聽手指的縮放事件，都是系統提供的類，比較方便使用。

第二步，設置須要加載的圖片

public void setImage(InputStream is){
      mOptions.inJustDecodeBounds = true;
      BitmapFactory.decodeStream(is,null,mOptions);
      mImageWidth = mOptions.outWidth;
      mImageHeight = mOptions.outHeight;
      mOptions.inPreferredConfig = Bitmap.Config.RGB_565;
      mOptions.inJustDecodeBounds = false;
      try {
          //區域解碼器
          mRegionDecoder = BitmapRegionDecoder.newInstance(is,false);
      } catch (IOException e) {
          e.printStackTrace();
      }
      requestLayout();
  }

設置須要要加載的圖片，不管圖片放到哪裏均可以拿到圖片的一個輸入流，因此參數使用輸入流，經過BitmapFactory.Options拿到圖片的真實寬高。

inPreferredConfig這個參數默認是Bitmap.Config.ARGB_8888，這裏將它改爲Bitmap.Config.RGB_565，去掉透明通道，能夠減小一半的內存使用。最後初始化區域解碼器BitmapRegionDecoder。

ARGB_8888就是由4個8位組成即32位， RGB_565就是R爲5位，G爲6位，B爲5位共16位

第三步，獲取View的寬高，計算縮放值

@Override
  protected void onSizeChanged(int w, int h, int oldw, int oldh) {
     super.onSizeChanged(w, h, oldw, oldh);
     mViewWidth = w;
     mViewHeight = h;
     mRect.top = 0;
     mRect.left = 0;
     mRect.right = (int) mViewWidth;
     mRect.bottom = (int) mViewHeight;
     mScale = mViewWidth/mImageWidth;
     mCurrentScale = mScale;
  }

onSizeChanged方法在佈局期間，當此視圖的大小發生更改時，將調用此方法，第一次在onMeasure以後調用，能夠方便的拿到View的寬高。

而後給咱們自定義的矩形mRect的上下左右的邊界賦值。通常狀況下咱們使用這個自定義的View顯示大圖，都是佔滿這個View，因此這裏矩形初始大小就讓它跟View同樣大。

mScale用來記錄原始的所方比，mCurrentScale用來記錄當前的所方比，由於有雙擊放大和手勢縮放，mCurrentScale隨着手勢變化。

第四步，繪製

@Override
  protected void onDraw(Canvas canvas) {
      super.onDraw(canvas);
      if(mRegionDecoder == null){
          return;
      }
      //複用內存
      mOptions.inBitmap = mBitmap;
      mBitmap = mRegionDecoder.decodeRegion(mRect,mOptions);
      mMatrix.setScale(mCurrentScale,mCurrentScale);
      canvas.drawBitmap(mBitmap,mMatrix,null);
  }

繪製也很簡單，經過區域解碼器解碼一個矩形的區域，返回一個Bitmap對象，而後經過canvas繪製Bitmap。須要注意mOptions.inBitmap = mBitmap;這個配置能夠複用內存，保證內存的使用一直只是矩形的這塊區域。

到這裏運行就能繪製出一部分圖片了，想要看所有的圖片，須要手指拖動來看，這就須要處理各類事件了。

第五步，分發事件

@Override
  public boolean onTouchEvent(MotionEvent event) {
      mGestureDetector.onTouchEvent(event);

      mScaleGestureDetector.onTouchEvent(event);
      return true;
  }

onTouchEvent中很簡單，事件都交給兩個手勢檢測器本身去處理。

第六步，處理`GestureDetector`中的事件

@Override
  public boolean onDown(MotionEvent e) {
      //若是正在滑動，先中止
      if(!mScroller.isFinished()){
          mScroller.forceFinished(true);
      }
      return true;
  }

當手指按下的時候，若是圖片正在飛速滑動，那麼中止

@Override
  public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
      //滑動的時候，改變mRect顯示區域的位置
      mRect.offset((int)distanceX,(int)distanceY);
      //處理上下左右的邊界
      if(mRect.left<0){
          mRect.left = 0;
          mRect.right = (int) (mViewWidth/mCurrentScale);
      }
      if(mRect.right>mImageWidth){
          mRect.right = (int) mImageWidth;
          mRect.left = (int) (mImageWidth-mViewWidth/mCurrentScale);
      }
      if(mRect.top<0){
          mRect.top = 0;
          mRect.bottom = (int) (mViewHeight/mCurrentScale);
      }
      if(mRect.bottom>mImageHeight){
          mRect.bottom = (int) mImageHeight;
          mRect.top = (int) (mImageHeight-mViewHeight/mCurrentScale);
      }
      invalidate();
      return false;
  }

onScroll中處理滑，根據手指移動的參數，來移動矩形繪製區域，這裏須要處理各個邊界點，好比左邊最小就爲0，右邊最大爲圖片的寬度，不能超出邊界不然就報錯了。

@Override
  public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
      mScroller.fling(mRect.left,mRect.top,-(int)velocityX,-(int)velocityY,0,(int)mImageWidth
             ,0,(int)mImageHeight);
      return false;
  }

  @Override
  public void computeScroll() {
      super.computeScroll();
      if(!mScroller.isFinished()&&mScroller.computeScrollOffset()){
          if(mRect.top+mViewHeight/mCurrentScale<mImageHeight){
              mRect.top = mScroller.getCurrY();
              mRect.bottom = (int) (mRect.top + mViewHeight/mCurrentScale);
          }
          if(mRect.bottom>mImageHeight) {
              mRect.top = (int) (mImageHeight - mViewHeight/mCurrentScale);
              mRect.bottom = (int) mImageHeight;
          }
          invalidate();
      }
  }

在onFling方法中調用滑動器Scroller的fling方法來處理手指離開以後慣性滑動。慣性移動的距離在View的computeScroll()方法中計算，也須要注意邊界問題，不要滑出邊界。

第七步，處理雙擊事件

@Override
  public boolean onDoubleTap(MotionEvent e) {
      //處理雙擊事件
      if (mCurrentScale>mScale){
          mCurrentScale = mScale;
      } else {
          mCurrentScale = mScale*mMultiple;
      }
      mRect.right = mRect.left+(int)(mViewWidth/mCurrentScale);
      mRect.bottom = mRect.top+(int)(mViewHeight/mCurrentScale);
      //處理邊界
      if(mRect.left<0){
          mRect.left = 0;
          mRect.right = (int) (mViewWidth/mCurrentScale);
      }
      if(mRect.right>mImageWidth){
          mRect.right = (int) mImageWidth;
          mRect.left = (int) (mImageWidth-mViewWidth/mCurrentScale);
      }
      if(mRect.top<0){
          mRect.top = 0;
          mRect.bottom = (int) (mViewHeight/mCurrentScale);
      }
      if(mRect.bottom>mImageHeight){
          mRect.bottom = (int) mImageHeight;
          mRect.top = (int) (mImageHeight-mViewHeight/mCurrentScale);
      }
    
      invalidate();
      return true;
  }

mMultiple爲雙擊以後放大幾倍，這裏設置3倍。第一次雙擊放大3倍，第二次雙擊返回原狀。縮放完成以後，須要根據當前的縮放比從新設置繪製區域的邊界。最後也須要從新定位一下邊界，由於若是使用兩個手指放大以後，這時候雙擊返回原狀，若是不處理邊界，位置會出錯。處理邊界的代碼能夠抽取出來。

第八步，處理手指縮放事件

@Override
  public boolean onScale(ScaleGestureDetector detector) {
      //處理手指縮放事件
      //獲取與上次事件相比，獲得的比例因子
      float scaleFactor = detector.getScaleFactor();
  //        mCurrentScale+=scaleFactor-1;
      mCurrentScale*=scaleFactor;
      if(mCurrentScale>mScale*mMultiple){
          mCurrentScale = mScale*mMultiple;
      }else if(mCurrentScale<=mScale){
          mCurrentScale = mScale;
      }
      mRect.right = mRect.left+(int)(mViewWidth/mCurrentScale);
      mRect.bottom = mRect.top+(int)(mViewHeight/mCurrentScale);
      invalidate();
      return true;
  }

  @Override
  public boolean onScaleBegin(ScaleGestureDetector detector) {
      //當 >= 2 個手指碰觸屏幕時調用，若返回 false 則忽略改事件調用
      return true;
  }

onScaleBegin方法須要返回true，不然沒法檢測到手勢縮放。onScale方法中獲取縮放因子，這個縮放因子是跟上次事件相比的出來的。因此這裏使用*=，完成以後也須要從新設置繪製區域mRect的邊界。

到這裏各類功能就完成啦~
源碼