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

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

WBOY

풀어 주다： 2016-05-16 15:48:35

원래의

1743명이 탐색했습니다.

1. 동영상 스트리밍

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

코드 복사

코드는 다음과 같습니다.

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를 이용하면 사용자에게 자르기, 색칠하기, 그래피티 화판 기능 등의 이미지 편집 기능을 제공하고, 사용자가 편집한 이미지를 서버에 저장할 수 있습니다.