T

ImageAsResized for Android更新

無料公開なので誰が使っているのか(あるいは誰も使っていないのか)さっぱり把握していないImageAsResized for Androidですが、前回の更新から1年くらい放置したままだったので、いくつか機能を追加して更新しました。というのも、AppceleratorからImageFactoryというAndroidで使える画像処理用モジュールが出ていたので、ああこれは役割を終えたなと思っていたところ、ImageFactoryを実際の案件で使ってみたらout of memoryが出まくって使い物にならなかったので、またこちらに戻ってきたのでした。

ビルドが面倒な方はAppceleratorのMarketplaceからビルド済みのファイルをダウンロードできます。

追加した機能はこちら:

  • 画像の回転
  • 画像の切り抜き

実際のところ回転は以前も動いていたので、実質的には切り取りを追加しただけですけどね。久しぶりなので復習しておくと、このモジュールには大きくわけて2つの機能があります。ひとつは、カメラやギャラリーから受け取るTiBlobを扱うcameraImageAsResizedとcameraImageAsCroppedのセットで、例えばTi.Media.showCameraのsuccessコールバックの中でe.mediaを渡すとそれをリサイズします。

image_mod.cameraImageAsResized(TiBlob, 幅, 高さ, 回転角度);
image_mod.cameraImageAsCropped(TiBlob, 幅, 高さ, 回転角度, 切り取り開始位置(横), 切り取り開始位置(縦));

切り取り開始位置は0がそれぞれ左端と一番上です。そこから幅と高さで指定された分だけの範囲を切り取ります。

button.addEventListener('click', function(){
  showCamera({
    success:function(e){
      var androimage = require('org.selfkleptomaniac.ti.imageasresized');
      var image = androimage.cameraImageAsResized(e.media, w, h, 0); //これでリサイズされる
      ......
      ......
    },
    error:function(e){...},
    cancel:function(e){...}
  });
});

もうひとつは、ローカルのファイルシステムにある画像を加工するimageAsResizedとimageAsCroppedのペアです。

image_mod.imageAsResized(幅, 高さ, ファイル, 回転角度);
image_mod.imageAsCropped(幅, 高さ, ファイル, 回転角度, 切り取り開始位置(横), 切り取り開始位置(縦));

使い方はこんな感じ。画像素材はexamle/imagesに入っています。

var self = Ti.UI.createWindow();
var image_mod = require('org.selfkleptomaniac.ti.imageasresized');

// 半分サイズ
var cropped_image = image_mod.imageAsResized(64, 106, "images/tzara.jpg", 0);
var imageView = Ti.UI.createImageView({image:cropped_image, top:250});
self.add(imageView);

// 顔のアップ
var cropped_image2 = image_mod.imageAsCropped(24, 56, "images/tzara.jpg", 0, 17, 5);
var imageView2 = Ti.UI.createImageView({image:cropped_image2, top:380});
self.add(imageView2);

// 手のアップ
var cropped_image3 = image_mod.imageAsCropped(64, 26, "images/tzara.jpg", 0, 0, 80);
var imageView3 = Ti.UI.createImageView({image:cropped_image3, top:450});
self.add(imageView3);

// 顔のアップを回転させてみた
var cropped_image4 = image_mod.imageAsCropped(24, 56, "images/tzara.jpg", 90, 17, 5);
var imageView4 = Ti.UI.createImageView({image:cropped_image4, top:520});
self.add(imageView4);

 return self;

注意事項ですが、元の画像のプロポーションと異なる幅と高さを指定すると勝手に画像が切り取られます。まあ、そりゃそうですよね。

Posted by on 7月 11, 2012 in Android, Titanium

Comments

  • lostman より:

    使わせていただこうと思い、gitでDLしたのですが設定方法がいまいちわかりません。
    作業中のディレクトリに設置するだけでよいのでしょうか?
    よろしくお願いします。

  • y より:

    dist以下のzipファイルをプロジェクトのディレクトリ直下に設置します。

    tiapp.xmlをこちらのように編集するか、Titanium Studioのtieapp.xml用エディタでモジュールを有効にして、cleanしてビルドします。

  • mamy より:

    このモジュールを使って画像をリサイズした後にサーバーにアップロードしているのですが、
    .txt形式でアップロードされてしまいます。jpegやpngなど本来の形式のままアップロードしたいのですが
    なにか対策はあるのでしょうか?

  • y より:

    どうやって送信していますか?例えば、

    var image = image_mod.imageAsResized(e.media, width, height, 0);
    var params = {"image":image};
    httpClient.open('POST', url);
    httpClient.send(params);
    

    こんな感じでしょうか。multipartで送信してあげないとサーバ側でちゃんと処理できないようでしたら、以前こんなサンプルを作りました。

    https://gist.github.com/1378595

  • mamy より:

    送信方法は、y様の記述と同様の方法で、リサイズの前後は下記の通りです。
    var androimage = require(‘org.selfkleptomaniac.ti.imageasresized’);
    var newImage = androimage.cameraImageAsResized(event.media, 640, 640, 90);
    img1.image = newImage;
    img1というimageviewを作成して、リサイズ後に格納しています。

    元の画像のまま送信すればjpegやpngで保存されるんですけれど、なぜですかね。。

    multipartの問題かどうか少し調査してみます。

  • tanakasu より:

    初めまして。
    過去のコメントを参照し、モジュールのダウンロード、配置、tiapp.xmlへのモジュールの反映まで実施した後、実機で実行すると、「License Violtaion Detected」というエラー文言が出力されます。どのように対応すべきでしょうか。ご教授お願い致します。

  • y より:

    ソースコードのmanifestにあるguidを変えると…大丈夫…です…

  • tanakasu より:

    ご回答ありがとうございます!
    知識不足ですみません。。。
    yさんの作成したモジュールのmanifest内のguidを、私のアプリtiapp.xmlのguidに追記するという認識で正しいでしょうか・・・
    追記後、プロジェクトのcleanを実施しても同様のエラーが出力されてしまいます。すみませんがご教授頂けますでしょうか。よろしくお願いします。

  • y より:

    モジュールはGithubから入手していますか?それなら、manifestというファイルがありますので、そちらを編集してみてください。値は適当で大丈夫なので一部を他の文字に入れ替えるなどしてください。シェルを利用できるなら、

    $ export ANDROID_SDK=Android SDKの置かれたディレクトリ
    $ export ANDROID_NDK=Android NSDの置かれたディレクトリ
    $ ant

    を実行します。distディレクトリにモジュールが作成されています。

    https://github.com/yagitoshiro/ImageAsResized

  • tanakasu より:

    ご回答どうもありがとうございました!
    無事読み込むことができました!ありがとうございます!

  • コメントを残す