📑

ionicでカメラまたはライブラリの写真を使用する

2023/01/30に公開

Vue.js

Ionic

camera

tech

あまり、実装についての参考サイトがなかったため、書きました。

公式ページ

表

公式より抜粋(2023年1月26日)後、日本語訳

prop	Type	Description	Since
base64Strinig	string	CameraResultType.Base64を使用している場合、base64 でエンコードされた画像の文字列表現	1.0.0
dataUrl	string	CameraResultType.DataUrlを使用する場合は、「data:image/jpeg;base64」で始まる URL、および base64 でエンコードされた画像の文字列表現。	1.0.0
path	string	CameraResultType.Uriを使用する場合、パスにはプラットフォーム固有の完全なファイル URL が含まれ、後で Filesystem API を使用して読み取ることができます。	1.0.0
webPath	string	webPath は、効率的な読み込みとレンダリングのために画像の src 属性を設定するために使用できるパスを返します。	1.0.0
exif	any	画像から取得した Exif データ (存在する場合)	1.0.0
format	string	画像の形式。例: jpeg、png、gif。iOS と Android は jpeg のみをサポートします。Web は jpeg と png をサポートしています。gif は、ファイル入力を使用する場合にのみサポートされます。	1.0.0
saved	boolean	画像がギャラリーに保存されたかどうか。Android および iOS では、ユーザーが必要なアクセス許可を付与していない場合、ギャラリーへの保存が失敗する可能性があります。Web にはギャラリーがないため、常に false を返します。	1.1.0

prop	Type	Description
quality	number	JPEG として返す画像の品質 (0 ～ 100)
allowEditing	boolean	ユーザーがトリミングまたは小さな編集を行うことを許可するかどうか (プラットフォーム固有)。iOS 14 以降では、 CameraSource.Camera でのみサポートされていますが、 CameraSource.Photosではサポートされていません。
resultType	CameraResultType	データを返す方法。現在、「Base64」、「DataUrl」、または「Uri」のみがサポートされています
saveToGallery	boolean	写真をギャラリーに保存するかどうか。写真がギャラリーから選択された場合、編集された場合にのみ保存されます。
width	number	保存するイメージの希望の最大幅。アスペクト比は尊重されます。
height	number	保存されたイメージの望ましい最大の高さ。アスペクト比は尊重されます。
correctOrientation	boolean	縦向きモードで画像を自動的に「上」に回転させて向きを修正するかどうか
source	CameraSource	写真を取得するソース。デフォルトでは、これによりユーザーはフォトアルバムを選択するか、写真を撮るように求められます。
direction	CameraDirection	iOS および Web のみ: カメラの方向。
presentationStyle	'fullscreen' / 'popover'	iOS のみ: カメラのプレゼンテーションスタイル。
webUseInput	boolean	Web のみ: PWA 要素エクスペリエンスまたはファイル入力を使用するかどうか。デフォルトでは、インストールされている場合は PWA 要素を使用し、ファイル入力にフォールバックします。常にファイル入力を使用するには、これをに設定しtrueます。PWA 要素の詳細: https://capacitorjs.com/docs/web/pwa-elements
promptLabelHeader	string	プロンプトを表示するときに使用するテキスト値。
promptLabelCancel	string	プロンプトを表示するときに使用するテキスト値。iOS のみ: 「キャンセル」ボタンのラベル。
promptLabelPhoto	string	string プロンプトを表示するときに使用するテキスト値。保存した画像を選択するボタンのラベル。
promptLabelPicture	string	プロンプトを表示するときに使用するテキスト値。カメラを開くボタンのラベル。

CameraSource

Members	Value	Description
Prompt	'PROMPT'	Prompts the user to select either the photo album or take a photo.
Camera	'CAMERA'	Take a new photo using the camera.
Photos	'PHOTOS'	Pick an existing photo from the gallery or photo album.

簡単に実装

Camera.getPhoto({
                quality: 100,            // 0~100まで
                source: CameraSource.Prompt,   // 写真を撮るorライブラリから選択or両方
                resultType: CameraResultType.DataUrl, // 実行後のデータの種類を指定
                presentationStyle: 'popover',    // 画像の表示
                webUseInput: true,               // ブラウザで実行した時の処理
                promptLabelHeader: "写真を選択",   // 以下の文言のタイトル的なもの
                promptLabelPicture: "写真を撮る",  // 写真を撮るときに表示される文言
                promptLabelPhoto: "アルバルから選択", // ライブラリにアクセスする時に表示される文言
                promptLabelCancel: "キャンセル"      // 実行を取りやめる時の文言
            })

公式ページ

表

CameraSource

簡単に実装

Discussion