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

iPhoneアプリ開発 -WebViewで表示しているページで特定のリンククリック時の動作を変える-

* やりたいこと UIWebViewでWebページを表示し、特定のリンクをクリックした際には別処理を

記事を読む

no image

CakePHP1.3でスマートフォン対応

CakePHP1.3でスマートフォン対応のためにやったことをメモしておきます。 * 環境 -

記事を読む

no image

CakePHPのモデルのキャッシュではまった -新しく追加したカラムに値が入らない-

タイトルのとおり、ちょこっとCakePHPではまったのでメモ。 * 作業内容 -MySQLで、ある

記事を読む

sample1

jQuery Mobile1.2のCollapsible Listsを試してみた -画像のカスタマイズについて-

8月1日にjQuery Mobile1.2 Alphaが出ました。 まだAlphaなので自

記事を読む

no image

アプリのためにFacebookページ作成 -現時点で注意すべき点-

* 前回 会社のメルアドでFacebookページを作成する方法を載せました。 * Faceboo

記事を読む

no image

MacBook ProにGitのインストール

MacBook ProにGitをインストールしようと思いたち、思ったより手間取ってしまったので備忘録

記事を読む

no image

FacebookページをFacebookアプリで表示 -iPhoneアプリ編-

* やりたいこと Facebookアプリを入れている人には、アプリでFacebookページで表示。

記事を読む

jenkins-files

Windows環境でもJenkins -執事さんとご対面-

Trac Lightningに同梱されていますし、Windows環境でHudsonを使っている人は結

記事を読む

mixisample

iPhoneアプリ開発 -mixiSDKを使ってmixi連携をしてみる(1)-

* やりたいこと iPhoneアプリでmixiと連携し、mixiボイスなどに文字を投稿する。 ※

記事を読む

no image

iPhoneアプリ開発 -UIScrollViewで画像を拡大・縮小-

* やりたいこと UIScrollViewでピンチアウト・インして上に乗っている画像を拡大・縮小した

記事を読む

広告

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 ↑