浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【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」についての紹介でした。
導入はとても簡単なので、是非ご活用ください。

  • この記事いいね! (0)