HTML5 카메라 기능 구현 코드(html5 업로드 파일)_html5 튜토리얼 기술

1. 동영상 스트리밍

HTML5 미디어 캡처 API는 카메라에 대한 프로그래밍 가능한 액세스를 제공합니다. 사용자는 getUserMedia를 사용하여 카메라에서 제공하는 비디오 스트림을 직접 얻을 수 있습니다. 우리가 해야 할 일은 HTML5 비디오 태그를 추가하고 카메라에서 얻은 비디오를 이 태그의 입력 소스로 사용하는 것입니다(현재는 Chrome과 Opera만 getUserMedia를 지원한다는 점에 유의하세요).

코드 복사

코드는 다음과 같습니다.

<script> <br>varvideo_element=document.getElementById('video') <br>if(navigator.getUserMedia){//operashoulduseopera.getUserMedianow <br>navigator.getUserMedia('video',success,error); <br>functionsuccess(stream){ <br>video_element.src=stream; <br></script>


동영상 스트리밍

2. 사진을 찍으세요

카메라 기능의 경우 HTML5 Canvas를 사용하여 Video 태그의 내용을 실시간으로 캡처합니다. Video 요소는 Canvas 이미지의 입력으로 사용될 수 있습니다. 주요 코드는 다음과 같습니다.

코드 복사

코드는 다음과 같습니다.

JavaScript 코드 내용을 클립보드

var canvas=document.createElement('canvas');

var ctx=canvas.getContext('2d')
var cw=vw;
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. 이미지 획득

다음으로 Canvas에서 이미지 데이터를 가져오겠습니다. 핵심 아이디어는 Canvas의 toDataURL을 사용하여 Canvas 데이터를 "data:image/png;base64, xxxxx".

코드 복사

코드는 다음과 같습니다.var imgData=canvas.toDataURL (“이미지 /png”)

실제 이미지 데이터는 base64 인코딩에서 쉼표 뒤의 부분이기 때문에 실제 서버에서 처리되는 이미지 데이터는 두 가지 방법으로 얻을 수 있습니다.

첫 번째 방법은 프런트 엔드에서 22비트 뒤의 문자열을 이미지 데이터로 가로채는 것입니다. 예를 들면 다음과 같습니다.

코드 복사

코드는 다음과 같습니다.var data=imgData.substr (22)

업로드하기 전에 이미지 크기를 확인하려면 다음을 사용하세요.

코드 복사

코드는 다음과 같습니다.var length=atob(data ).length ;//atobdecodesastringofdata는 base-64 인코딩을 사용하여 인코딩되었습니다

두 번째 방법은 백엔드에서 전송된 데이터를 얻은 후 배경 언어를 사용하여 22자리 이후의 문자열을 가로채는 것입니다. 예를 들어 PHP에서는 다음과 같습니다.

코드 복사

코드는 다음과 같습니다.$image=base64_decode(str_replace ('data :image/jpeg;base64,',”,$data)

4. 이미지 업로드

프런트 엔드에서는 Ajax를 사용하여 위에서 얻은 이미지 데이터를 백그라운드 스크립트에 업로드할 수 있습니다. 예를 들어 jQuery를 사용하는 경우:

코드 복사

코드는 다음과 같습니다.$.post('upload .php' ,{'data':data});

백그라운드에서는 PHP 스크립트를 사용하여 데이터를 수신하고 이미지로 저장합니다.

코드 복사

코드는 다음과 같습니다.functionconvert_data($data){

$image=base64_decode(str_replace('data:image/jpeg;base64,',",$data);

save_to_file($image);

}
functionsave_to_file($image){
$ fp=fopen($filename,'w');
fwrite($fp,$image)
fclose($fp)

위 솔루션은 웹앱 사진 업로드에만 사용할 수 있는 것이 아니라 캔버스 출력을 이미지 업로드로 변환하는 기능도 구현할 수 있다는 점에 유의하세요. 이와 같이 Canvas를 이용하면 사용자에게 자르기, 색칠하기, 그래피티 화판 기능 등의 이미지 편집 기능을 제공하고, 사용자가 편집한 이미지를 서버에 저장할 수 있습니다.