質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Cordova

Cordovaは様々なデバイスで使うことができるオープンソースなモバイル用開発プラットフォームです。開発者に各デバイスの元のプラットフォームで開発する必要をなくし、HTML・JavaScript・CSSなどの一般的なウェブのテクノロジーを使ってすべてのデバイスで展開することができるモバイルのアプリケーションを生成することを可能にします。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

Q&A

0回答

2734閲覧

cordova-plugin-camera-preview で撮影する画像サイズを指定したい

comeon

総合スコア9

Cordova

Cordovaは様々なデバイスで使うことができるオープンソースなモバイル用開発プラットフォームです。開発者に各デバイスの元のプラットフォームで開発する必要をなくし、HTML・JavaScript・CSSなどの一般的なウェブのテクノロジーを使ってすべてのデバイスで展開することができるモバイルのアプリケーションを生成することを可能にします。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

0グッド

0クリップ

投稿2019/04/12 19:59

HTML / JavaScript 上で、cordova-plugin-camera-preview を使って画像サイズを指定しながらプレビューし撮影したいのですが、撮影した画像のサイズを指定できずに困っています。
Monacaを使って開発しています。

この方の記事を参考に、以下のコードを作成しました。
(一部 Onsen-UI も使用しています)

ons.ready(function() { // プレビュー表示 var wd = window.screen.width; var ht = window.screen.height; CameraPreview.startCamera({ width: wd, // プレビュー領域の幅 height: ht/2, // プレビュー領域の高さ camera: CameraPreview.CAMERA_DIRECTION.BACK, tapPhoto: false, tapFocus: false, previewDrag: false, toBack: true }); // 撮影 let source = document.getElementById('capture'); source.addEventListener('click', function() { CameraPreview.takePicture({width:640, height:640, quality: 85}, function(base64PictureData){ imageSrcData = 'data:image/jpeg;base64,' +base64PictureData; let img = document.getElementById('preview'); img.src = imageSrcData; }); // 表示 mask.className = ''; }); // 再度撮影 back.addEventListener('click', function() { mask.className = 'hidden'; }); }); </script> <body> <!-- プレビュー開始 --> <div class="actions"> <ons-button id="capture">撮影</ons-button> </div> <div id="mask" class="hidden"> <img id="preview"> <p>この画像で登録しますか? </p> <ons-button id="back">←再度撮影</ons-button> <ons-button id="next">登録する→</ons-button> </div>

CSS

html, body, .ion-app, .ion-content { background-color: transparent; } .actions { vertical-align: bottom; margin-top: 380px; text-align: center; } #mask { background: rgba(255, 255, 255, 0.8); position: fixed; top: 0; /* bottom: 0; */ left: 0; /* right: 0; */ width: 100%; height: 100%; z-index: 1; text-align: center; } #mask.hidden { display: none; } #capture { text-align: center; margin: 0 auto; } #preview { margin: 10px auto; width: 80%; height: 80%; z-index: 2; position: relative; } #back { float: left; margin-left: 30px; } #next { float: right; margin-right: 30px; }

CameraPreview.startCamera でプレビュー領域の幅を画面幅、高さを画面高さの半分に指定し、これは
指定通りに表示されています。

// プレビュー表示 var wd = window.screen.width; var ht = window.screen.height; CameraPreview.startCamera({ width: wd, // プレビュー領域の幅 height: ht/2, // プレビュー領域の高さ       //以下略 });

次に CameraPreview.takePicture で撮影画像の幅と高さを指定する(現在 640 x 640)のですが、
この値を変えても撮影画像のサイズが変更できません。

CameraPreview.takePicture({width:640, height:640, quality: 85}, function(base64PictureData){ imageSrcData = 'data:image/jpeg;base64,' +base64PictureData; let img = document.getElementById('preview'); img.src = imageSrcData; });

こちらのサイトにドキュメントがあり、takePicture のオプションで画像サイズを指定すると記載されていますがこれが反映されません。

またその下に takeSnapshot でカメラプレビューのが画像をキャプチャーできると記載されていますが、こちらではエラーメッセージが出ます。

CameraPreview.takeSnapshot({quality: 85}, function(base64PictureData){

エラーメッセージ: takeSnapshot is not a function

試したこと
- width:640, height:640 → width:640px, height:640px と指定 → ダメ
- width:640, height:640 → width:wd, height:ht/2 と指定 → ダメ
- CameraPreview.takeSnapshot({quality: 85}で撮影 → ダメ

わかる方がいらっしゃいましたら教えてください。
よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問