【Cordova】Abobeの画像加工機能を実装できるプラグイン「phonegap-plugin-csdk-image-editor」

本来ならばこちらの記事を先に投稿するべきだったかも…。

昨日の記事で、「phonegap-plugin-csdk-image-editor」というプラグインを導入した際に遭遇したエラーについての対処法について紹介しましたが、今日はそのプラグインの導入方法についてです。

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

GitHub – CreativeSDK/phonegap-plugin-csdk-image-editor: A PhoneGap plugin for the Creative SDK Image Editor.
https://github.com/CreativeSDK/phonegap-plugin-csdk-image-editor

実装方法ですが、まずは本命のプラグインを導入する前に phonegap-plugin-csdk-client-auth プラグインをインストールする必要があります。
で、その際に、各プラットフォームの クライアントID と クライアントシークレットが必要になるので、下記の URL から登録する必要があります。

Adobe I/O Console
https://console.adobe.io/integrations

あとは上記で登録した ID などを使って、下記のコマンドを実行します。

cordova plugin add --save phonegap-plugin-csdk-client-auth --variable CSDK_CLIENT_ID_IOS="[iOS のクライアントID]" --variable CSDK_CLIENT_SECRET_IOS="[iOS のクライアントシークレット]" --variable CSDK_CLIENT_ID_ANDROID="[Android のクライアントID]" --variable CSDK_CLIENT_SECRET_ANDROID="[Android のクライアントシークレット]"

こちらの実行が完了したら、下記のコマンドを実行し、画像加工用のプラグインをインストールします。

cordova plugin add --save phonegap-plugin-csdk-image-editor

準備はこれで完了です。
あとは、任意の場所で下記のコードを実行すればOKです。

function success(newUrl) {
    // 画像加工が成功した時の処理
    console.log("Success!", newUrl);
}
function error(error) {
    // 画像加工が失敗した時の処理
    console.log("Error!", error);
}

var imageUrl = "[加工したい画像のURI]";
var options = {
    outputType: CSDKImageEditor.OutputType.JPEG,
    tools: [
        CSDKImageEditor.ToolType.EFFECTS,
        CSDKImageEditor.ToolType.CROP
    ],
    quality: 50
};
// エディターを起動
CSDKImageEditor.edit(success, error, imageUrl, options);

メソッドやオプションについてのガイドは下記からご確認頂けます。

API guide
https://github.com/CreativeSDK/phonegap-plugin-csdk-image-editor/blob/master/docs/api.md

以上、Adobe Creative SDK の画像加工機能を実装できるプラグイン「phonegap-plugin-csdk-image-editor」のご紹介でした。
ただし、昨日の記事でも書きましたが、別途ライブラリの追加が必要なのでご注意ください。