Question

是否可以从Web App打开Camera实例？

我有一个Web应用程序。显示一些东西，我希望用户能够拍照并将其发送到

服务器。我怎样才能做到这一点？

Answer 1

使用cordova apis很容易

查看以下代码示例：

<强> JS：

// A button will call this function
// To capture photo
function capturePhoto() {
    // Take picture using device camera and retrieve image as base64-encoded string
    navigator.camera.getPicture(uploadPhoto, onFail, { 
        quality: 50, destinationType: Camera.DestinationType.FILE_URI 
    });
}

// A button will call this function
// To select image from gallery
function getPhoto(source) {
    // Retrieve image file location from specified source
    navigator.camera.getPicture(uploadPhoto, onFail, { quality: 50,
        destinationType: navigator.camera.DestinationType.FILE_URI,
        sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY
    });
}

function uploadPhoto(imageURI) {
    //If you wish to display image on your page in app
    // Get image handle
    var largeImage = document.getElementById('largeImage');

    // Unhide image elements
    largeImage.style.display = 'block';

    // Show the captured photo
    // The inline CSS rules are used to resize the image
    largeImage.src = imageURI;

    var options = new FileUploadOptions();
    options.fileKey = "file";
    var userid = '123456';
    var imagefilename = userid + Number(new Date()) + ".jpg";
    options.fileName = imagefilename;
    options.mimeType = "image/jpg";

    var params = new Object();
    params.imageURI = imageURI;
    params.userid = sessionStorage.loginuserid;
    options.params = params;
    options.chunkedMode = false;
    var ft = new FileTransfer();
    var url = "Your_Web_Service_URL";
    ft.upload(imageURI, url, win, fail, options, true);
}
//Success callback
function win(r) {
    alert("Image uploaded successfully!!");
}
//Failure callback
function fail(error) {
    alert("There was an error uploading image");
}
// Called if something bad happens.
// 
function onFail(message) {
    alert('Failed because: ' + message);
}

<强> HTML：

<input name="button" type="button" onclick="capturePhoto()" value="Take Photo"/>

<input name="button" type="button" onclick="getPhoto();" value="Browse" />

希望有所帮助。

Answer 2

如果您希望直接使用WebApp，可能需要查看表单的File输入类型。

具体来说，在iOS 6中，他们添加了使用表单中的<input type="file">从相机或图库提交图片的功能。然后，您可以将表单设置为发送到服务器，并接受传入的文件。

这样做的另一个好处就是不需要构建应用程序，不需要尝试通过任何审批流程等等。它也非常受欢迎。根据此File Upload Support on Mobile页面，它在iOS 6 +，Android 2.2 +，BlackBerry 6+和Windows RT中得到支持。

从Web应用程序打开相机实例

2 个答案: