【Cordova】画像をトリミングできるプラグイン「cordova-plugin-crop」

今回は、画像加工のための Cordova プラグインについてご紹介。
画像のトリミングができる「cordova-plugin-crop」というプラグインです。
私はアルバムやカメラで撮影した写真を正方形に切り抜きたかったので、今回導入してみました。

導入にあたって、参考にさせていただいた記事はこちら。

Cordova – カメラを使用してクリックするか画像を選択した後、画像をトリミングします。|cordova tutorial
https://riptutorial.com/ja/cordova/example/23783/カメラを使用してクリックするか画像を選択した後-画像をトリミングします-

GitHub のページはこちらから。

GitHub – jeduan/cordova-plugin-crop: Crop an image in Cordova
https://github.com/jeduan/cordova-plugin-crop

導入方法は、まずプラグインを下記コマンドでインストールします。

cordova plugin add --save cordova-plugin-crop

その後、下記のコードを画像トリミングをしたいタイミングで実行します。

plugins.crop(function success () {
  // トリミング成功時の処理
}, function fail () {
  // トリミング失敗時の処理
}, '[トリミングしたい画像パス]', { quality: 100 });

{ quality: 100 } はトリミングする際のオプションで、下記の3つがあります。

• quality：画像の品質（Default：100）
• targetWidth：トリミング後の画像の幅（Default：-1）
• targetHeight：トリミング後の画像の高さ（Default：-1）

上で紹介した参考サイトでは、カメラプラグインと組み合わせて、撮影した写真を正方形にトリミングしていました。
そのコードはこちら。
一部オプションの値を修正したり、カメラ撮影をアルバムからの写真選択に変更したりしています。

navigator.camera.getPicture(onSuccess, onFail, {
    sourceType: window.navigator.camera.PictureSourceType.PHOTOLIBRARY,
    quality: 100,
    destinationType: Camera.DestinationType.FILE_URI,
    saveToPhotoAlbum: true,
    encodingType: window.navigator.camera.EncodingType.PNG,
});
function onSuccess(imageData) {
    plugins.crop(function success (data) {
        var image = document.getElementById('[撮影した写真を表示するimgタグのID]');
        image.src = data;
    }, 
    function fail () {
        // トリミング失敗時の処理
    }, imageData, {quality: 100, targetWidth: 200, targetHeight: 200});
}
function onFail(message) {
    // 写真撮影失敗時の処理
}

上記を実行したところ、写真選択後、トリミングの処理が実行されました！
が、写真選択からトリミング処理の画面が表示されるまでに少し時間がかかります。
このままだと少々ストレスになるので、ローディング画像を表示したり、そもそも起動を早められないか、調べてみたいと思います。

以上、画像のトリミングを行えるプラグイン「cordova-plugin-crop」についての紹介でした。
導入はとても簡単なので、是非ご活用ください。