웹 응용 프로그램에서 카메라 인스턴스 열기

Question

Web App에서 카메라 인스턴스를 열 수 있습니까?

웹 앱이 있습니다. 어떤 것을 표시하고 사용자가 사진을 찍어서

서버로 보낼 수있게하려고합니다. 이것을 어떻게 할 수 있습니까?

Answer 1

는 다음 코드 샘플 쉽게

체크 아웃의 코르도바 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" /> 

희망 에스.

Answer 2

WebApp를 직진하려는 경우 양식의 입력 유형을 File으로 볼 수 있습니다.

특히 iOS 6에서는 양식 내에서 <input type="file">을 사용하여 카메라 또는 갤러리에서 사진을 제출할 수있는 기능을 추가했습니다. 그런 다음 서버로 보낼 양식을 설정하고 들어오는 파일을 수락 할 수 있습니다.

이렇게하면 앱을 만들 필요가 없으며 승인 절차 등을 통해 앱을 설치하지 않아도된다는 이점이 있습니다. 또한 매우 일반적으로 지원됩니다. 이 File Upload Support on Mobile 페이지에 따르면, iOS 6 이상, Android 2.2 이상, BlackBerry 6 이상 및 Windows RT에서 지원됩니다.