Androidアプリ開発で画像を加工するならuCrop(注意点あり

のえる

2020.07.29

アプリ内で画像を取得して何かをする、という機能はスマホアプリにおいて当たり前となってきました。

しかし、標準で画像をCropする機能自体は提供されておらず、自前で作る必要があります。

今回は画像のCropを楽に行えるライブラリ uCrop の使い方を説明します。

1 はじめに
2 ライブラリ設定
3 機能を組み込む
4 さいご

はじめに

今回開発する環境は下記のとおりです。

Android: Stuiod: 4.0.1
minSdkVersion: 24
targetSdkVersion: 30
compileSdkVersion: 30
Gradle: 6.1.1

ライブラリ設定

まずはリポジトリを追加します。


allprojects {
    repositories {
        google()
        jcenter()
        maven { url "https://jitpack.io" }
    }
}

allprojects {

repositories {

google()

jcenter()

maven { url "https://jitpack.io" }

}

リポジトリを追加したら Gradle にライブラリを追加する内容を記載しましょう。


dependencies {

    // uCrop - Image Cropping Library for Android
    implementation 'com.github.yalantis:ucrop:2.2.5'

}

dependencies {

// uCrop - Image Cropping Library for Android

implementation 'com.github.yalantis:ucrop:2.2.5'

}

これでライブラリを使用することができます。

機能を組み込む

uCropの機能を導入していきます。

まずは AndroidManifest.xml ファイルに uCrop の Activity を追加します。


<manifest>
    <application>

        <!-- uCrop -->
        <activity
            android:name="com.yalantis.ucrop.UCropActivity"
            android:screenOrientation="portrait"
            android:theme="@style/Theme.AppCompat.Light.NoActionBar"/>

    </application>
</manifest>

<activity

android:name="com.yalantis.ucrop.UCropActivity"

android:screenOrientation="portrait"

android:theme="@style/Theme.AppCompat.Light.NoActionBar"/>

</application>

</manifest>

そして使いたい Activity にプログラムを追加しましょう。


// ライブラリのインポート
import com.yalantis.ucrop.UCrop

// ライブラリのインポート

import com.yalantis.ucrop.UCrop

uCropの開き方は下記のような感じです。


class SampleActivity: AppCompatActivity() {
    private fun openCropView(uri: Uri)
    {
        val fileName = "crop.png"
        val cropFile = File(cacheDir, fileName)

        cropFile?.let { file ->
            val cropUri = Uri.fromFile(file)
            var uCrop =  UCrop.of(uri, cropUri)

            // uCropのオプションを設定
            val options = UCrop.Options()
            options.setToolbarTitle("画像切り出し画面")
            options.setToolbarWidgetColor(getColor(android.R.color.white))
            options.setToolbarColor(getColor(R.color.colorPrimary))
            options.setStatusBarColor(getColor(R.color.colorPrimaryDark))
            options.setActiveControlsWidgetColor(getColor(R.color.colorAccent))
            options.setCompressionFormat(Bitmap.CompressFormat.PNG)
            options.setCompressionQuality(100)
            options.setHideBottomControls(false)
            options.setFreeStyleCropEnabled(true)
            uCrop = uCrop.withOptions(options)

            // uCropを開く
            uCrop.start(this)
        }
    }
}

class SampleActivity: AppCompatActivity() {

private fun openCropView(uri: Uri)

{

val fileName = "crop.png"

val cropFile = File(cacheDir, fileName)

cropFile?.let { file ->

val cropUri = Uri.fromFile(file)

var uCrop = UCrop.of(uri, cropUri)

// uCropのオプションを設定

val options = UCrop.Options()

options.setToolbarTitle("画像切り出し画面")

options.setToolbarWidgetColor(getColor(android.R.color.white))

options.setToolbarColor(getColor(R.color.colorPrimary))

options.setStatusBarColor(getColor(R.color.colorPrimaryDark))

options.setActiveControlsWidgetColor(getColor(R.color.colorAccent))

options.setCompressionFormat(Bitmap.CompressFormat.PNG)

options.setCompressionQuality(100)

options.setHideBottomControls(false)

options.setFreeStyleCropEnabled(true)

uCrop = uCrop.withOptions(options)

// uCropを開く

uCrop.start(this)

}

ここでのポイントは getExternalFilesDirではうまく動かない という点です。
このことに気づくまでにずいぶんと時間を取られました(公式には記載されていないです)

そのため、上記の例では cacheDir にファイルを作成しており、この場合は正常に動作します。

また、使用しているオプションなどはメソッド名から察することが可能なので、説明は割愛させていただきます。

さいごに、Cropされた後の画像を取得するには下記のとおりです。


override fun onActivityResult(requestCode: Int, resultCode: Int, intent: Intent?) {
    super.onActivityResult(requestCode, resultCode, intent)

    // uCrop
    if(requestCode == UCrop.REQUEST_CROP) {
        // Crop完了時
        if(resultCode == RESULT_OK) {
            // Cropした画像を取得
            val resultUri = UCrop.getOutput(intent!!)
            if(resultUri != null) {
                // TODO: 画像を使う処理を書く
            }
        }
        // Cropキャンセル時
        if(resultCode == RESULT_CANCELED) {
            // TODO: キャンセルされた
        }
        // Cropエラー時
        if(resultCode == UCrop.RESULT_ERROR) {
            // TODO: エラーが発生した
            Log.e("TAG", "uCropエラー: "+UCrop.getError(intent!!).toString())
        }
    }
}

override fun onActivityResult(requestCode: Int, resultCode: Int, intent: Intent?) {

super.onActivityResult(requestCode, resultCode, intent)

// uCrop

if(requestCode == UCrop.REQUEST_CROP) {

// Crop完了時

if(resultCode == RESULT_OK) {

// Cropした画像を取得

val resultUri = UCrop.getOutput(intent!!)

if(resultUri != null) {

// TODO: 画像を使う処理を書く

}

// Cropキャンセル時

if(resultCode == RESULT_CANCELED) {

// TODO: キャンセルされた

}

// Cropエラー時

if(resultCode == UCrop.RESULT_ERROR) {

// TODO: エラーが発生した

Log.e("TAG", "uCropエラー: "+UCrop.getError(intent!!).toString())

}

ここまで来ればもうお判りでしょう。

Uri を利用して画像を操作していくことができます。

さいご

画像のCropや傾きを1つのライブラリで操作できるのはとても助かりますね。

もし不明点などがあれば公式を見てみてはいかがでしょうか。

GitHub – Yalantis/uCrop

ではでは。

おすすめ記事

POPULAR

のえる

Full-stack Developer

記事一覧

サーバーの用意は不要？Google Cloud Shellでデモ環境を構築してみた

ARCoreを使おうとしたら思いっきりハマった話

のえる

Full-stack Developer

お休みはゲーム三昧。目指すは生涯自由人。ツナ缶大好き。

記事一覧

Androidアプリ開発で画像を加工するならuCrop(注意点あり

はじめに

ライブラリ設定

機能を組み込む

さいご

Git初心者必見！最低限これは覚えておこう

WebブラウザからWindowsアプリケーションを開く[追記あり]

node.js のアプリを永続化(デーモン化)させる

iPadアプリがフルスクリーンにならない

WindowsのDockerでMySQLが起動しない

Androidアプリ開発で画像を加工するならuCrop(注意点あり

はじめに

ライブラリ設定

機能を組み込む

さいご

Androidで別画面のイベントを取得する方法

AndroidXに対応しようとしてハマった話

【必見】Androidアプリからプリンターへ印刷をするには

Git初心者必見！最低限これは覚えておこう

WebブラウザからWindowsアプリケーションを開く[追記あり]

iPadをノート代わりにして6か月。良い点と悪い点をまとめてみた

Composerが使えない環境でComposer用のライブラリを使う方法

Git初心者必見！最低限これは覚えておこう

WebブラウザからWindowsアプリケーションを開く[追記あり]

iPadをノート代わりにして6か月。良い点と悪い点をまとめてみた

node.js のアプリを永続化(デーモン化)させる

iPadアプリがフルスクリーンにならない

WindowsのDockerでMySQLが起動しない