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

Question

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

我的 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);
}

Answer 1

我已经检查了您的代码，并且可以正常工作。它已经在 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);
}