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

【问题标题】：Opening Camera Instance from a Web App从 Web 应用程序打开相机实例
【发布时间】：2013-07-18 12:32:06
【问题描述】：

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

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

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

【问题讨论】：

标签： cordova titanium appcelerator rhomobile rhodes

【解决方案1】：

使用cordova api很容易

查看以下代码示例：

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" />

希望对您有所帮助。

【讨论】：

【解决方案2】：

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

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

这具有不需要构建应用程序、不需要尝试通过任何审批流程等额外的好处。它也非常普遍地得到支持。根据这个File Upload Support on Mobile 页面，它在iOS 6+、Android 2.2+、BlackBerry 6+ 和Windows RT 中受支持。

【讨论】：