의견 : HTML5 사양을 지원하면 WebApp이 휴대 전화에서 사진을 찍을 수있었습니다. 아래에서는 웹 앱이 휴대폰으로 사진을 찍고 페이지에 표시를 표시 한 후 서버에 업로드하는 방법을 설명합니다.
1. 비디오 스트리밍
HTML5 미디어 캡처 API는 카메라에 대한 프로그래밍 가능한 액세스를 제공하며 사용자는 GetUsermedia를 직접 사용하여 카메라에서 제공하는 비디오 스트림을 얻을 수 있습니다. 우리가해야 할 일은 HTML5 비디오 태그를 추가 하고이 태그의 입력 소스로 카메라에서 비디오를 가져 오는 것입니다 (Chrome과 Opera 만 현재 GetUsermedia를 지원합니다).
<videoidvideoid = videoAutoPlay = "> </video>
<cript>
varvideo_element = document.getElementById ( '비디오');
if (navigator.getusermedia) {// OperashouldUseOpera.getUsermedianow
navigator.getUsermedia ( '비디오', 성공, 오류);
}
functionsuccess (stream) {
video_lement.src = stream;
}
</스크립트>
비디오 스트리밍
2. 사진을 찍으십시오
사진 촬영 기능의 경우 HTML5 캔버스를 사용하여 비디오 태그의 내용을 실시간으로 캡처하며 비디오 요소는 캔버스 이미지에 대한 입력으로 사용할 수 있습니다. 기본 코드는 다음과 같습니다.
JavaScript 코드는 컨텐츠를 클립 보드에 복사합니다
var canvas = document.createElement ( 'canvas');
var ctx = canvas.getContext ( '2d');
var cw = vw;
var ch = vh;
ctx.fillstyle =#ffffff;
ctx.fillRect (0,0, CW, CH);
Ctx.DrawImage (Video_Element, 0,0, VVW, VVH, 0,0, VW, VH);
document.body.append (캔버스);
3. 사진 획득
다음으로 캔버스에서 이미지 데이터를 얻고 싶습니다. 핵심 아이디어는 캔버스의 Todataurl을 사용하여 캔버스의 데이터를 Base64 비트 인코딩 된 PNG 이미지로 변환하는 것입니다. 이미지/png; base64, xxxxx.
var imgdata = canvas.todataurl (image/png);
실제 이미지 데이터는 Base64 인코딩 된 쉼표 이후의 부분이므로 실제 서버에서 처리 한 이미지 데이터 가이 부분이어야하며 두 가지 방식으로 얻을 수 있습니다.
첫 번째 유형은 예를 들어 22 비트 문자열을 프론트 엔드의 이미지 데이터로 가로 채는 것입니다.
var data = imgdata.substr (22);
업로드하기 전에 이미지의 크기를 얻으려면 다음을 사용할 수 있습니다.
var length = atob (data) .length; // atobdecodesastringofdatawhhasbeenencodedusingbase-644oding
두 번째 유형은 백엔드에서 전송 된 데이터를 얻고 배경 언어로 22 비트 문자열을 가로 채는 것입니다. 예를 들어, PHP에서 :
$ im
4. 사진 업로드
프론트 엔드에서는 Ajax를 사용하여 위에서 얻은 이미지 데이터를 백그라운드 스크립트에 업로드 할 수 있습니다. 예를 들어 jQuery를 사용할 때 :
$ .post ( 'upload.php', { 'data': data});
백그라운드에서는 PHP 스크립트를 사용하여 데이터를 수신하고 사진으로 저장합니다.
functionconvert_data ($ data) {
$ im
save_to_file ($ image);
}
functionsave_to_file ($ image) {
$ fp = fopen ($ filename, 'w');
fwrite ($ fp, $ image);
fclose ($ fp);
}
위의 솔루션은 웹 앱 사진 업로드에 사용할 수있을뿐만 아니라 캔버스 출력을 이미지 업로드로 변환 할 수 있습니다. 이러한 방식으로 캔버스를 사용하여 사용자에게 자르기, 채색 및 낙서 아트 보드 기능과 같은 사진 편집을 제공 한 다음 사용자의 편집 된 사진을 서버에 저장할 수 있습니다.