PhoneGapを触ってみた(3) -画像を扱う(Camera APIを使ってみる)-

公開日: : IT, PhoneGap


今回は、PhoneGapのCamera APIを使って携帯のアルバムにある画像を扱ってみます。

 今までの流れ

 アルバムデータの取得

今回は、携帯のアルバムにある画像を読み込んで、表示させることをPhoneGapを使ってやってみます。
Andoirdの場合、fileタグを使えばアルバムを読み込めますが、PhoneGapで用いているWebViewでは使えません。
そのため、今回はPhoneGapのCamera APIを使います。

 構成

  • assets/www配下

    • index.html
    • album.js
    • phonegap-1.4.1.js(ダウンロードしているもの)

index.htmlとalbum.jsの内容については次で説明します。

 各ソース

 HTMLファイル(index.html)

※今回は、jQueryMobileも使っています。

<!DOCTYPE HTML>
<html>
<head>
<title>アルバム</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
<script src="phonegap-1.4.1.js"></script>
<script src="album.js"></script>
</head>
<body>
<span data-role="button" class="album" data-inline="true">アルバム参照</span> //(1)
img:<img width=60  height="60" id="albumImage" src="" /> //(2)
canvas:<canvas id="canvasImage" width="60" height="60" ></canvas> //(3)
</body>
</html>
  • (1)の記述によりボタンとして表示されます(jQueryMobileの記述法)
  • (1)をクリックすると(2)、(3)に画像が表示されます
  • (2)はimgタグを使っていて、(3)はHTML5であつかえるCanvasを使っています

 JavaScript(album.js)

(function( $, undefined ){
$(window).bind('pagecreate', function(e){
 $(&quot;.album&quot;).live(&quot;click&quot;, function(){
	 getPhoto(navigator.camera.PictureSourceType.SAVEDPHOTOALBUM);
 });
});
<br />
function getPhoto(source) { //(1)
	navigator.camera.getPicture(onPhotoURISuccess, onFail, {
		quality: 50,
    	destinationType: navigator.camera.DestinationType.FILE_URI,
    	sourceType: source });
}
function onPhotoURISuccess(imageURI) {
    //imgに表示
	var albumImage = document.getElementById('albumImage');
	albumImage.style.display = 'block';
	albumImage.src = imageURI; //(2)
    //canvasに表示
	var canvasImage = document.getElementById('canvasImage');
	var context = canvasImage.getContext('2d');
	var image = new Image();
	image.src = imageURI; //(3)
	image.onload = function(){ //(4)
		context.drawImage(image,0,0, canvasImage.width, canvasImage.height);
	};
}
function onFail(message) {
      alert('Failed because: ' + message);
}
}( jQuery ));
  • ボタンがクリックされると(1)のgetPhotoメソッドが呼ばれます
  • そこでPhoneGapのCameraAPIを使ってアルバムを参照します
  • アルバムから画像が読み込まれると、onPhotoURISuccessメソッドが呼ばれます
  • (2)でimgタグのsrcに画像のURIを読み込ませています
  • (3)でCanvasに画像のURIを読み込ませています
  • (4)で読み込める段階で描画せています(drawImageは引数によって色々見せ方を変えられます)

以上で、アルバムの画像を表示させることができます。

 蛇足

ちなみに、Android2.x系ではCanvasのtoDataURLは使えません。
そのため、Canvasで読み込んだあとにtoDataURLをつかって、base64エンコードした情報をサーバーに送って画像を保存という技は使えません。

 メモ

最初の頃は日本語のPhoneGapFanのAPIを見ていましたが、やはりチェックするなら公式がいいです。
PhoneGapFanの情報はちょっと古いですね。

 参考サイト

広告

関連記事

no image

jQuery Mobileの初期設定 -jQuery Mobieを利用時にページ内リンクさせたい-

* 前提 jQuery Mobileを利用していて、以下のタグを使ってページ内遷移したいことがありま

記事を読む

no image

MySQLのバックアップ手順 -消えたら困るものはバックアップ-

そろそろデータが消えてもらったら困るぐらいになっていたのでバックアップをとることにしました。 とい

記事を読む

setup

Google Appsで独自ドメインメールの利用

独自ドメインでメアドを持ちたかったのでGoogle Appsを利用してみました。 その各種設定の覚

記事を読む

no image

jQuery Mobileでミスしたこと -JSだけ最新にしてしまってレイアウト崩れたの巻-

* 前提(CDN先) jQuery Mobileを使う場合、cssを自前のサーバにおいて、jsはC

記事を読む

no image

order byでハマったこと -order by、group byの処理順序-

CakePHPでorder byとgroup byを使っていてはまったことについてのメモ。 * 

記事を読む

no image

iPhoneアプリ開発 −複数前の画面に戻る−

* やりたいこと ある画面から別の画面に遷移したい。 -1つ前の画面に戻りたい。 -2つ前の画面に戻

記事を読む

ndk

Androidアプリ開発 -画像処理をC言語で高速化-

* 画像を扱う際の問題(1):計算処理の遅さ 前回、セピア画像にする方法を書きました。

記事を読む

no image

第二回Androidテスト祭り参加記録 -祭りに参加してきたよ-

久しぶりに勉強会に参加してきました。 参加してきたのは「第二回Androidテスト祭り(4/28)

記事を読む

no image

「Google Apps」無償版の新規登録が終了

以前、「Google Apps」を利用した以下の記事を書きましたが、とうとう無償版の新規登録が終了

記事を読む

no image

Selenium2.0でUIテスト(2) -Rubyでやってみよう-

前回は、Selenium + PHPを試しました。 今後はRubyでやってみようということでSele

記事を読む

広告

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

広告

no image
[感想] Effective Objective-C 2.0 ☆☆☆☆★(4.5)

* 構成 - 第1章 Objective-Cに慣れる -

no image
[感想] iOSアプリテスト自動化入門 ☆☆☆(3.0)

* 構成 - Chapter 1 テスト自動化への取り組み

DeployGateを試してみた(iOS編) -DeployGateがiOSに対応-

今までのDeployGate - -[http://pplace.

iPhone/iPadアプリを開発するためにやったこと

今までに、iPhoneを3本ほどリリース((リリースしたアプリは全て1

no image
ターミナルでgitのコマンドを補完したりブランチ名を表示する – macでgitを便利に使うために –

* やりたいこと macのターミナルでgitをいじっていると -今の

→もっと見る

PAGE TOP ↑