0

是否可以从 Web 应用程序打开相机实例？

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

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

4

2 回答 2

0

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

希望有帮助。

于 2013-07-18T13:02:52.930 回答
0

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

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

这有一个额外的好处，不需要构建应用程序，不需要尝试通过任何批准过程等。它也很普遍支持。根据移动页面上的文件上传支持，它在 iOS 6+、Android 2.2+、BlackBerry 6+ 和 Windows RT 中受支持。

于 2013-07-19T05:49:56.893 回答