HTML5カメラ機能実装コード(html5アップロードファイル)_html5チュートリアルスキル-H5 チュートリアル-php.cn

HTML5カメラ機能実装コード(html5アップロードファイル)_html5チュートリアルスキル

WBOY

リリース： 2016-05-16 15:48:35

オリジナル

1743 人が閲覧しました

1. ビデオストリーミング

HTML5 Media Capture API は、カメラへのプログラム可能なアクセスを提供します。ユーザーは getUserMedia を直接使用して、カメラから提供されるビデオストリームを取得できます。必要なのは、HTML5 Video タグを追加し、カメラから取得したビデオをこのタグの入力ソースとして使用することです (現在 getUserMedia をサポートしているのは Chrome と Opera のみであることに注意してください)。

コードをコピーします

コードは次のとおりです:

varvideo_element=document.getElementById('video');
if(navigator.getUserMedia){//operaShoulduseopera.getUserMedianow
navigator.getUserMedia('video',success,error);
functionsuccess(stream){
video_element.src=stream;

ビデオストリーミング

2. 写真を撮ります

カメラ機能では、HTML5 Canvas を使用して Video タグのコンテンツをリアルタイムでキャプチャし、Video 要素を Canvas 画像の入力として使用できます。メインコードは次のとおりです:

コードをコピーします

コードは次のとおりです:

JavaScript コードコンテンツをクリップボード

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

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(canvas);
3.画像取得

次に、Canvas から画像データを取得します。主なアイデアは、Canvas の toDataURL を使用して、Canvas データを「data:image/png;base64」の形式と同様の、base64 ビットでエンコードされた PNG 画像に変換することです。 ×××××」。

コードをコピーします

コードは次のとおりです:

var imgData=canvas.toDataURL (“画像 /png”);

実際の画像データはbase64エンコードのカンマ以降の部分なので、実際のサーバーで処理した画像データはこの部分になるはずです。2つの方法で取得できます。

最初の方法は、フロントエンドの 22 ビット以降の文字列を画像データとしてインターセプトすることです。例:

コードをコピーします

コードは次のとおりです:

var data=imgData.substr (22) ;

アップロードする前に画像のサイズを取得したい場合は、以下を使用できます:

コードをコピーします

コードは次のとおりです。

var length=atob(data ).length ;//atobdecodebase-64 エンコーディングを使用してエンコードされたデータの文字列

2 番目の方法は、バックエンドで送信されたデータを取得した後、バックグラウンド言語を使用して 22 桁以降の文字列をインターセプトすることです。たとえば、PHP では:

コードをコピーします

コードは次のとおりです:

$image=base64_decode(str_replace) ('データ :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) }

上記のソリューションは、Web アプリの写真アップロードに使用できるだけでなく、Canvas 出力を画像アップロードに変換する機能も実装できることに注意してください。このように、Canvas を使用して、トリミング、色付け、落書きボード機能などの画像編集をユーザーに提供し、ユーザーが編集した画像をサーバーに保存できます。