(譯)uCrop介紹 —— 我們自己的Android圖片裁剪庫(kù)

原文鏈接:https://yalantis.com/blog/introducing-ucrop-our-own-image-cropping-library-for-android

譯者:Eirture

我們?cè)?Yalantis 開(kāi)發(fā)了許多不同的 Android 應(yīng)用,經(jīng)驗(yàn)告訴我們,幾乎在所有的應(yīng)用中,都需要圖片裁剪的功能。圖片裁剪的用途很廣,從簡(jiǎn)單的用戶頭像調(diào)整到圖片的比例裁剪、靈活變換等各種復(fù)雜的處理。

我們想為所有的用戶提供最好的圖片處理工具,所以決定創(chuàng)建Android的圖片裁剪庫(kù) uCrop 。 可以在 Product Hunt 上為 uCorp 投票。

也許你會(huì)好奇,為什么我們不使用現(xiàn)成的 Android 圖片裁剪解決方案。 畢竟,可以在 Github 或者 Android Arsenal 上找到很多這類的庫(kù)。但是問(wèn)題是,那些解決方案都不滿足我們的需求。我們來(lái)看一些主流的開(kāi)源圖片裁剪庫(kù),為什么不符合我們的需求。

為什么其它的開(kāi)源庫(kù)不好用

  1. SoundCloud 裁剪庫(kù)

我在幾個(gè)項(xiàng)目里面使用了 SoundCloud 庫(kù)很成功,但是仍然有幾個(gè)問(wèn)題讓我很頭痛。

首先,你操作的是一個(gè)裁剪的框,而不是圖片本身。當(dāng)需要裁剪一個(gè)很小面積的圖片時(shí),這會(huì)你感覺(jué)有點(diǎn)痛苦。這是與用戶使用習(xí)慣向悖的。我確信 Instagram 傳授給我們的是一些優(yōu)秀的 UX (用戶體驗(yàn)),可以移動(dòng)的裁剪框也已經(jīng)滅絕了。

其次,SoundCloud 裁剪庫(kù)不允許用戶旋轉(zhuǎn)圖片。Come on, guys! 所有人都知道,有成百上千“不可思議”的安卓手機(jī)給照片設(shè)置了錯(cuò)誤的EXIF信息(謝天謝地,我們有 CWAC 來(lái)清理這個(gè)爛攤子)。而且,很大部分的用戶是希望能夠轉(zhuǎn)動(dòng)圖片的(不僅僅是 90 度)。

最后同樣重要的一點(diǎn),使用 SoundCloud 庫(kù)不能改變長(zhǎng)寬比。當(dāng)然,如果你使用它僅僅是需要獲取一個(gè)方形的頭像,那沒(méi)有任何問(wèn)題。但是,其它很多很有趣的頭像形狀,用這個(gè)庫(kù)無(wú)法實(shí)現(xiàn)。

  1. Edmodo Cropper
Edmodo Cropper 與 SoundCloud 庫(kù)非常相似,缺點(diǎn)也同樣相似。不過(guò),這個(gè)庫(kù)支持動(dòng)態(tài)的改變裁剪框的長(zhǎng)寬比。它也有參考線和一種旋轉(zhuǎn)圖片的方式(僅僅只有一種方式,所以你需要想辦法解決手勢(shì)檢測(cè)或是一些控件來(lái)控制自己的手勢(shì))。
  1. Scissors

Scissors 是一個(gè)新的庫(kù),不久前我在一個(gè)安卓問(wèn)題周刊上看到它的時(shí)候特別激動(dòng)。但 5 分鐘內(nèi)我的興奮就消失了。引用一句關(guān)于 Scissors 的博文

...我們研究了現(xiàn)有的庫(kù)。都不符合我們的需求,因此我們決定構(gòu)建自己庫(kù)。

這確實(shí)是一個(gè)值得稱贊的方法。實(shí)際上,我們找到又是一個(gè)不能旋轉(zhuǎn)圖片,也不能動(dòng)態(tài)調(diào)整寬高比的庫(kù)。盡管 Scissors 集成了一些主流的圖片加載庫(kù),像 Picasso, Glide 以及 Universal Image Loader。希望 Scissors 在后續(xù)的版本中有更多實(shí)用的功能。

我喜歡 Scissors 實(shí)現(xiàn)的縮放方式。無(wú)論你的手指在哪里,圖片總是向中間收縮。
我喜歡 Scissors 實(shí)現(xiàn)的縮放方式。無(wú)論你的手指在哪里,圖片總是向中間收縮。

分析完這些現(xiàn)有庫(kù)的缺點(diǎn),我們決定創(chuàng)建自己的庫(kù),支持手勢(shì)并且有一個(gè)良好的 UX。

uCrop: 一個(gè)解決圖片裁剪問(wèn)題的庫(kù)

安卓庫(kù) uCrop 允許你修剪圖片來(lái)更好的使用。uCrop 重要的特性如下:

  • 縮放圖片
  • 旋轉(zhuǎn)圖片
  • 改變裁剪長(zhǎng)寬比例
  • 支持出手勢(shì):一根指頭滑動(dòng)圖片,兩根指頭旋轉(zhuǎn)圖片,捏拉縮放,雙擊縮放。
  • 上手即可用的 Activity 功能設(shè)計(jì),精巧的控件實(shí)現(xiàn)更精確的圖片旋轉(zhuǎn)和縮放,以及一組通用的預(yù)設(shè)長(zhǎng)寬比(1:1,4:3,3:4,2:3,3:2,16:9,9:16 + 圖片原始比例)。

uCrop 有一個(gè)初始化的構(gòu)建類型接口,來(lái)為你的應(yīng)用配置一些適當(dāng)?shù)膶傩?。uCrop 庫(kù)最低的版本要求是 API 10,示例應(yīng)用工作的版本是 API 15+ 。

如何在你的項(xiàng)目中使用 uCrop ?

  1. 添加 uCrop 庫(kù)依賴作為本地項(xiàng)目庫(kù)。
```
  compile 'com.yalantis:ucrop:[latest version]'
```
  1. 使用構(gòu)造者模式來(lái)創(chuàng)建 uCrop 及配置。
```
  UCrop.of(sourceUri, destinationUri)
    .withAspectRatio(16, 9)
    .withMaxResultSize(maxWidth, maxHeight)
    .start(context);
```
  1. 覆寫(xiě) onActivityResult 方法來(lái)捕獲 uCrop 返回?cái)?shù)據(jù)。
```
  @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

你可以改變下面這個(gè)設(shè)置:

  • 壓縮格式 (e.g. PNG, JPEG, WEBP)。
  • 壓縮的質(zhì)量[0 - 100] (PNG 是無(wú)損的,會(huì)忽略質(zhì)量設(shè)置)
  • 支持并發(fā)的手勢(shì)
  • Bitmap 最大的尺寸是從 Uri 中解碼來(lái)的,并且同樣會(huì)在裁剪的視圖中。(如果你想覆蓋默認(rèn)的屬性)
  • 更多(e.g. color palette)

在下一篇文章中,將會(huì)展示我們構(gòu)建 uCrop 的經(jīng)歷,敬請(qǐng)關(guān)注!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容