无法让 PhoneGap 访问 IOS 摄像头。按钮问题

Cant get PhoneGap to access IOS camera. Button issues

我无法让我的按钮单击并访问我的相机和其他功能。

我的 HTML 部分代码。我确实安装了所有必要的插件。而且我能够查看我创建的按钮。但是单击它们时没有任何反应。

<div class="row">
   <div class="col-sm-2"> </div>
    <div id="imgDiv" class="col-sm-5 col-xs-11 thumbnail">
      <img src="#" alt="Image" id="img" />
      <div class="text-center">
      <button type="button" class="btn btn-primary" id="btPhotoLib">Photo</button>
      <button type="button" class="btn btn-primary active" id="btCamera">Camera</button>
      <button type="button" class="btn btn-primary" id="btUpload">Upload</button>   
      </div>                        
    </div>              
</div>

我的 JS 文件:

var imgURI;
var serverURL ="ajlnfioej/upload.php";

$(document).ready(function(){
    document.addEventListener('deviceready', getCameraReady, false);    
});

function getCameraReady(){
    $('#btCamera').on('click', function(e){
        options = {quality:50, destinationType: Camera.Destination.FILE_URI,     sourceType: pictureSource.CAMERA};

        navigator.camera.getPicture(photoSuccess, photoFail,[options]);     
        }); 

    $('#btPhotoLib').on('click', function(e){
    options = {quality:50, destinationType: Camera.Destination.FILE_URI, sourceType: pictureSource.PHOTOLIBRARY};
    navigator.camera.getPicture(photoSuccess, photoFail,[options]);
});

$('#btUpload').on('click', function(e){
    var options = new FileUploadOptions();
    options.fileKey = "file";
    options.fileName = imgURI.substr(imgURI.lastIndexOf('/')+1);
    options.mimeType = "image/jpeg";

    var ft = new FileTransfer();
    var server = encodeURI(serverURL);
    ft.upload(imgURI, server,uploadSuccess, uploadFail,options);        
});
}


function photoSuccess(uri){
    $("#img").attr("src", uri);
    $("#img").css("width": "100%", "height": "100%");
    imgURI = uri;
}

function cameraError(message){
    navigator.notification.alert("camera usage not supported on this device");
}

function uploadSuccess(result){
navigator.camera.cleanup();
navigator.notification.alert("Number of bytes is : " + results.bytesSent);
navigator.notification.alert("Http Response is : " +results.response );


function uploadFail(){
    alert("Am error has occured: Code = " + error.code);
}

我已经检查了你的代码并让它工作了。它已经在 Android 和 iOS 上进行了测试,但是我无法测试上传。

  • 我已更正您的 javascript 中的一些语法错误(缺少一些大括号以及其他一些小问题)。

  • 当使用JQuery添加多个css标签时,你必须给它一个对象,看起来你只是错过了大括号。

  • 添加到 photoFail 函数中,因为它已被使用但未定义。

  • 为错误函数添加了错误参数。

  • Camera.getPicture options 参数需要一个对象,但它被赋予了一个数组。

  • Camera.Destination没有定义,应该是Camera.DestinationType.

  • pictureSource没有定义,应该是Camera.PictureSourceType.


我从检查 cordova-plugin-camera documentation 得到了大部分信息。我建议通读一下。

这是工作代码。您可以查看所有更改 here.

var imgURI;
var serverURL ="ajlnfioej/upload.php";

$(document).ready(function(){
    document.addEventListener('deviceready', getCameraReady, false);    
});

function getCameraReady(){
    $('#btCamera').on('click', function(e){
        var options = {quality:50, destinationType: Camera.DestinationType.FILE_URI, sourceType: Camera.PictureSourceType.CAMERA};

        navigator.camera.getPicture(photoSuccess, photoFail, options);     
    }); 

    $('#btPhotoLib').on('click', function(e){
        var options = {quality:50, destinationType: Camera.DestinationType.FILE_URI, sourceType: Camera.PictureSourceType.PHOTOLIBRARY};
        navigator.camera.getPicture(photoSuccess, photoFail, options);
    });

    $('#btUpload').on('click', function(e){
        var options = new FileUploadOptions();
        options.fileKey = "file";
        options.fileName = imgURI.substr(imgURI.lastIndexOf('/')+1);
        options.mimeType = "image/jpeg";

        var ft = new FileTransfer();
        var server = encodeURI(serverURL);
        ft.upload(imgURI, server,uploadSuccess, uploadFail,options);        
    });
}


function photoSuccess(uri){
    $("#img").attr("src", uri);
    $("#img").css({"width": "100%", "height": "100%"});
    imgURI = uri;
}

function cameraError(message){
    navigator.notification.alert("camera usage not supported on this device");
}

function uploadSuccess(result){
    navigator.camera.cleanup();
    navigator.notification.alert("Number of bytes is : " + result.bytesSent);
    navigator.notification.alert("Http Response is : " +result.response );
}

function uploadFail(error){
    alert("Am error has occured: Code = " + error.code);
}

function photoFail(error){
    alert("Am error has occured: Code = " + error.code);
}