使用phonegap捕捉和上传图片

Question

我想使用设备相机拍摄照片，它将存储在某种类型的缩略图中：

function onDeviceReady() {
    pictureSource = navigator.camera.PictureSourceType;
    destinationType = navigator.camera.DestinationType;
}

function onPhotoDataSuccessFront(imageData) {

    var smallImageFront = document.getElementById('smallImageFront');
    smallImageFront.style.display = 'block';
    smallImageFront.src = "data:image/jpeg;base64," + imageData;

    $('#btnFrontDiv').text('Retake Front');
}

正如您所看到的，我使用了navigator.camera / cordova中可用的phonegap。我想使用cordova或普通的javascript来捕捉照片。谢谢你的任何建议。

Answer 1

试试这个

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title> Cmaer</title>
<script type="text/javascript" src="cordova.js" ></script>
<script type="text/javascript">
var pictureSource,destinationType;
            document.addEventListener("deviceready",loaded,false);
            function loaded() {
                pictureSource=navigator.camera.PictureSourceType;
                destinationType=navigator.camera.DestinationType;
            }
            function getPhoto(imageData) {
                var smallImage = document.getElementById('smallImage');
                smallImage.style.display = 'block';
                smallImage.src = imageData;
            }
            function capturePhoto() {
                navigator.camera.getPicture(getPhoto, onFail, { quality: 50 });
            }
            function onFail(message) {
                alert('Failed because: ' + message);
            }
            </script>
    </head>
    <body>
        <button onclick="capturePhoto();">Capture Photo</button> <br>
        <img style="display:none;width:60px;height:60px;" id="smallImage" src="" />

</body>
</html>

Reference

Answer 2

使用phonegap捕捉和上传图片

function uploadImage(){          
    navigator.camera.getPicture(uploadPhoto, onFailcapturePhoto, { quality: 50,destinationType: Camera.DestinationType.FILE_URI }); 
}

function onFailcapturePhoto(message) {    
    console.log("Message = " + message);
}

function uploadPhoto(imageURI) {
    var imagefile = imageURI; 
    $('#imageId').attr('src', imagefile);
    /* Image Upload Start */
    var ft = new FileTransfer();                     
    var options = new FileUploadOptions();                      
    options.fileKey="vImage1";                      
    options.fileName=imagefile.substr(imagefile.lastIndexOf('/')+1);
    options.mimeType="image/jpeg";  
    var params = new Object();
    params.value1 = "test";
    params.value2 = "param";                       
    options.params = params;
    options.chunkedMode = false;                       
    ft.upload(imagefile, your_service_url, win, fail, options);   
}

function win(r) {
  console.log("Code = " + r.responseCode);
  console.log("Response = " + r.response);
//alert($.parseJSON(r.response))    
}

function fail(error) {
   console.log("Response = " +  error.code);
}

Answer 3

您可以使用HTML5，这会带来对设备硬件的大量访问。

请参阅此链接Capturing Audio & Video in HTML5

注意：自Chrome 21，Opera 18和Firefox 17以来，我们一直支持getUserMedia()。

在实施之前，请先查看支持浏览器列表（也适用于手机）。

使用navigator.camera或普通javascript捕获照片

3 个答案:

使用phonegap捕捉和上传图片