（譯）uCrop介紹 —— 我們自己的Android圖片裁剪庫

weixin_34337265發表於2016-12-08
Android

原文連結：https://yalantis.com/blog/introducing-ucrop-our-own-image-cropping-library-for-android

譯者：Eirture

我們在 Yalantis 開發了許多不同的 Android 應用，經驗告訴我們，幾乎在所有的應用中，都需要圖片裁剪的功能。圖片裁剪的用途很廣，從簡單的使用者頭像調整到圖片的比例裁剪、靈活變換等各種複雜的處理。

我們想為所有的使用者提供最好的圖片處理工具，所以決定建立Android的圖片裁剪庫 uCrop 。 可以在 Product Hunt 上為 uCorp 投票。

也許你會好奇，為什麼我們不使用現成的 Android 圖片裁剪解決方案。 畢竟，可以在 Github 或者 Android Arsenal 上找到很多這類的庫。但是問題是，那些解決方案都不滿足我們的需求。我們來看一些主流的開源圖片裁剪庫，為什麼不符合我們的需求。

為什麼其它的開源庫不好用

  1. SoundCloud 裁剪庫
638418-f86999f6c0d14977.png

我在幾個專案裡面使用了 SoundCloud 庫很成功，但是仍然有幾個問題讓我很頭痛。

首先，你操作的是一個裁剪的框，而不是圖片本身。當需要裁剪一個很小面積的圖片時，這會你感覺有點痛苦。這是與使用者使用習慣向悖的。我確信 Instagram 傳授給我們的是一些優秀的 UX (使用者體驗)，可以移動的裁剪框也已經滅絕了。

其次，SoundCloud 裁剪庫不允許使用者旋轉圖片。Come on, guys! 所有人都知道，有成百上千“不可思議”的安卓手機給照片設定了錯誤的EXIF資訊（謝天謝地，我們有 CWAC 來清理這個爛攤子）。而且，很大部分的使用者是希望能夠轉動圖片的（不僅僅是 90 度）。

最後同樣重要的一點，使用 SoundCloud 庫不能改變長寬比。當然，如果你使用它僅僅是需要獲取一個方形的頭像，那沒有任何問題。但是，其它很多很有趣的頭像形狀，用這個庫無法實現。

  1. Edmodo Cropper
638418-71b6453c1ae8ab21.jpeg
Edmodo Cropper 與 SoundCloud 庫非常相似，缺點也同樣相似。不過，這個庫支援動態的改變裁剪框的長寬比。它也有參考線和一種旋轉圖片的方式（僅僅只有一種方式，所以你需要想辦法解決手勢檢測或是一些控制元件來控制自己的手勢）。
  1. Scissors

Scissors 是一個新的庫，不久前我在一個安卓問題週刊上看到它的時候特別激動。但 5 分鐘內我的興奮就消失了。引用一句關於 Scissors 的博文：

...我們研究了現有的庫。都不符合我們的需求，因此我們決定構建自己庫。

這確實是一個值得稱讚的方法。實際上，我們找到又是一個不能旋轉圖片，也不能動態調整寬高比的庫。儘管 Scissors 整合了一些主流的圖片載入庫，像 Picasso, Glide 以及 Universal Image Loader。希望 Scissors 在後續的版本中有更多實用的功能。

我喜歡 Scissors 實現的縮放方式。無論你的手指在哪裡，圖片總是向中間收縮。

分析完這些現有庫的缺點，我們決定建立自己的庫，支援手勢並且有一個良好的 UX。

uCrop： 一個解決圖片裁剪問題的庫

安卓庫 uCrop 允許你修剪圖片來更好的使用。uCrop 重要的特性如下：

  • 縮放圖片
  • 旋轉圖片
  • 改變裁剪長寬比例
  • 支援出手勢：一根指頭滑動圖片，兩根指頭旋轉圖片，捏拉縮放，雙擊縮放。
  • 上手即可用的 Activity 功能設計，精巧的控制元件實現更精確的圖片旋轉和縮放，以及一組通用的預設長寬比（1:1，4:3，3:4，2:3，3:2，16:9，9:16 + 圖片原始比例）。

uCrop 有一個初始化的構建型別介面，來為你的應用配置一些適當的屬性。uCrop 庫最低的版本要求是 API 10，示例應用工作的版本是 API 15+ 。

如何在你的專案中使用 uCrop ?

  1. 新增 uCrop 庫依賴作為本地專案庫。
```
  compile 'com.yalantis:ucrop:[latest version]'
```
  1. 使用構造者模式來建立 uCrop 及配置。
```
  UCrop.of(sourceUri, destinationUri)
    .withAspectRatio(16, 9)
    .withMaxResultSize(maxWidth, maxHeight)
    .start(context);
```
  1. 覆寫 onActivityResult 方法來捕獲 uCrop 返回資料。
```
  @Override
  public void onActivityResult(int requestCode, int resultCode, Intent data) {
      if (resultCode == RESULT_OK && requestCode == UCrop.REQUEST_CROP) {
          final Uri resultUri = UCrop.getOutput(data);
      } else if (resultCode == UCrop.RESULT_ERROR) {
          final Throwable cropError = UCrop.getError(data);
      }
  }
```

如何自定義 uCrop

你可以改變下面這個設定：

  • 壓縮格式 (e.g. PNG, JPEG, WEBP)。
  • 壓縮的質量[0 - 100] (PNG 是無損的，會忽略質量設定)
  • 支援併發的手勢
  • Bitmap 最大的尺寸是從 Uri 中解碼來的，並且同樣會在裁剪的檢視中。(如果你想覆蓋預設的屬性)
  • 更多(e.g. color palette)

在下一篇文章中，將會展示我們構建 uCrop 的經歷，敬請關注！

相關文章