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}で撮影 → ダメ
わかる方がいらっしゃいましたら教えてください。
よろしくお願いします。
あなたの回答
tips
プレビュー