PhoneGap的 - 从摄像头显示多个画面捕捉 [英] PhoneGap - show multiple picture captured from Camera
本文介绍了PhoneGap的 - 从摄像头显示多个画面捕捉的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用的PhoneGap 和我需要至少2和最高8张照片。我需要显示所有拍摄的照片在同一屏幕上。我能捕捉照片1张，并显示，但无法显示所有8张图片。
I am using Phonegap and I need to take minimum 2 and maximum 8 photos. I need to show all captured photos in the same screen. I am able to capture 1 photo and show but unable to show all 8 photos.
另外，我需要将这些图像附加到电子邮件。我使用的电子邮件作曲家如果我给/mnt/sdcard/Android/data/pacakgename/cache/1380176187637.jpg，那么它附加在邮件，但所有图片8没有得到重视。在下面的屏幕截图可以看到只有一张图片被视为：
Also, I need to attach these images to mail. I am using email composer if i gave "/mnt/sdcard/Android/data/pacakgename/cache/1380176187637.jpg" then it is attached in mail but all 8 picture does not get attached. In below screen shot you can see only one picture is viewed:
我能够只显示一个图像，但我需要显示所有8图片和连接它的邮件。
I am able to only show one image but i need to show all 8 pics and attached it to mail.
以下是我的code
<html>
<head>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="emailcomposer.js"> </script>
<script type="text/javascript">
function deviceready() {
console.log("Device ready");
destinationType=navigator.camera.DestinationType;
}
var destinationType; // sets the format of returned value
function composeText(){
//console.log();
var file1 = document.getElementById('vehiclepic1').value
var message1 = document.getElementById('message_body').value;
console.log(message1);
window.plugins.emailComposer.showEmailComposer(
"Get Estimation",
message1,
["sth@mail.com",],
[],
[],
true,
["image.jpeg", "file.zip"]
);
}
function capturePhoto() {
// Take picture using device camera and retrieve image as base64-encoded string
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
destinationType: destinationType.DATA_URL });
}
function onPhotoDataSuccess(imageData) {
// Uncomment to view the base64-encoded image data
// console.log(imageData);
// Get image handle
//
var i = 0;
if(imageData.length != 0){
i++;
//alert(i++);
var smallImage = document.getElementById('vehiclepic1');
// Unhide image elements
//
smallImage.style.display = 'block';
// Show the captured photo
// The inline CSS rules are used to resize the image
smallImage.src = "data:image/jpeg;base64," + imageData;
}
}
function onFail(message) {
alert('Failed because: ' + message);
}
function callAnotherPage(){
window.location = "test.html";
}
document.addEventListener("deviceready", deviceready, true);
</script>
<style type="text/css">
li{
list-style: none;
float:left;
padding: 0 5 5 0 ;
}
</style>
</head>
<body>
Pictures
<ul>
<li>
<img style="width:100px;height:80px;" id="vehiclepic1" onclick="capturePhoto();" src="" />
</li>
<li>
<img style="width:100px;height:80px;" id="vehiclepic2" src="" onclick="capturePhoto();"/>
</li>
<li>
<img style="width:100px;height:80px;" id="vehiclepic3" src="" onclick="capturePhoto();" />
</li>
<li>
<img style="width:100px;height:80px;" id="vehiclepic4" src="" onclick="capturePhoto();"/>
</li>
<li>
<img style="width:100px;height:80px;" id="vehiclepic5" src="" onclick="capturePhoto();"/>
</li>
<li>
<img style="width:100px;height:80px;" id="vehiclepic6" src="" onclick="capturePhoto();"/>
</li>
<li>
<img style="width:100px;height:80px;" id="vehiclepic7" src="" onclick="capturePhoto();"/>
</li>
<li>
<img style="width:100px;height:80px;" id="vehiclepic8" src="" onclick="capturePhoto();"/>
</li>
</ul>
<div style="clear:both;"></div>
<button onclick="callAnotherPage();">Next</button>
</body>
任何想法。
推荐答案
我解决它下面的方式。
I solved it the following way.
function capturePhoto() {
// Take picture using device camera and retrieve image as base64-encoded string
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 25,
destinationType: Camera.DestinationType.FILE_URI, });
}
function onPhotoDataSuccess(imageURI) {
displayPhoto(imageURI);
}
function displayPhoto(imageURI)
{
capturedPhoto ++;
if(capturedPhoto == 1){
var part1 = document.getElementById('part1');
part1.src = imageURI;
}
else if(capturedPhoto == 2){
var part2 = document.getElementById('part2');
part2.src = imageURI;
}
else if(capturedPhoto == 3){
var part3 = document.getElementById('part3');
part3.src = imageURI;
}
else if(capturedPhoto == 4){
var part4 = document.getElementById('part4');
part4.src = imageURI;
}
else if(capturedPhoto == 5){
var part5 = document.getElementById('part5');
part5.src = imageURI;
}
else if(capturedPhoto == 6){
var part6 = document.getElementById('part6');
part6.src = imageURI;
}
else if(capturedPhoto == 7){
var part7 = document.getElementById('part7');
part7.src = imageURI;
}
else if(capturedPhoto == 8){
var part8 = document.getElementById('part8');
part8.src = imageURI;
}
}
这篇关于PhoneGap的 - 从摄像头显示多个画面捕捉的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
