如题所述
å¨HTML5è§èçæ¯æä¸ï¼WebAppå¨ææºä¸æç
§å·²ç»æ为å¯è½ãå¨ä¸é¢ï¼æå°è®²è§£Web Appå¦ä½ç¨ææºè¿è¡æç
§ï¼æ¾ç¤ºå¨é¡µé¢ä¸å¹¶ä¸ä¼ å°æå¡å¨ã
1ã è§é¢æµ
HTML5 The Media Capture
APIæä¾äºå¯¹æå头çå¯ç¼ç¨è®¿é®ï¼ç¨æ·å¯ä»¥ç´æ¥ç¨getUserMediaè·å¾æå头æä¾çè§é¢æµãæ们éè¦åçæ¯æ·»å ä¸ä¸ªHTML5çVideoæ
ç¾ï¼å¹¶å°ä»æå头è·å¾è§é¢ä½ä¸ºè¿ä¸ªæ ç¾çè¾å ¥æ¥æºï¼è¯·æ³¨æç®åä» ChromeåOperaæ¯ægetUserMediaãè¡¥å ï¼è¯·ä½¿ç¨Operaæ¯æHTML5çæ°çæ¬ï¼å¦ææ¯Chromeï¼çæ¬é为Chrome 18.0.1008+ï¼å¹¶ä½¿ç¨about:flagsæ¥å¼å¯WebRTCï¼è¯·çä¸å¾ï¼ã
[html] view plain copy
<video id="video" autoplay=""></video>
<script>
var video_element = document.getElementById('video');
if (navigator.getUserMedia) { // opera should use opera.getUserMedia now, chrome use webkitGetUserMedia
navigator.getUserMedia('video',success, error);
}
function success(stream) {
video_element.src =stream;
}
</script>
è§é¢æµ
2ã æç §
æç §åè½ï¼æ们éç¨HTML5çCanvaså®æ¶æè·Videoæ ç¾çå 容ï¼Videoå ç´ è½ä½ä¸ºCanvaså¾åçè¾å ¥ï¼è¿ä¸ç¹å¾æ£ã主è¦ä»£ç å¦ä¸ï¼
[html] view plain copy
<script>
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(canvas);
</script>
3ã å¾çè·å
ä¸é¢æ们è¦ä»Canvasè·åå¾çæ°æ®ï¼å ¶æ ¸å¿æè·¯æ¯ç¨canvasçtoDataURLå°Canvasçæ°æ®è½¬æ¢ä¸ºbase64ä½ç¼ç çPNGå¾åï¼ç±»ä¼¼äºâdata:image/png;base64,xxxxxâçæ ¼å¼ã
[html] view plain copy
var imgData =canvas.toDataURL("image/png");
å 为çæ£å¾åæ°æ®æ¯base64ç¼ç éå·ä¹åçé¨åï¼æ以æ们å®é æå¡å¨å¤ççå¾åæ°æ®åºè¯¥æ¯è¿é¨åï¼æ们å¯ä»¥ç¨ä¸¤ç§åæ³æ¥è·åã
第ä¸ç§ï¼æ¯å¨å端æªå22ä½ä»¥åçå符串ä½ä¸ºå¾åæ°æ®ï¼ä¾å¦ï¼
[html] view plain copy
var data = imgData.substr(22);
å¦æè¦å¨ä¸ä¼ åè·åå¾çç大å°ï¼å¯ä»¥ä½¿ç¨ï¼
[html] view plain copy
var length = atob(data).length;// atob decodes a string of data which has been encoded using base-64 encoding
第äºç§ï¼æ¯å¨å端è·åä¼ è¾çæ°æ®åç¨åå°è¯è¨æªå22ä½ä»¥åçå符串ãä¾å¦PHPéï¼
[html] view plain copy
$image = base64_decode( str_replace('data:image/jpeg;base64,', '',$data);
4ã å¾çä¸ä¼
å¨å端å¯ä»¥ä½¿ç¨Ajaxå°ä¸é¢è·å¾çå¾çæ°æ®ä¸ä¼ å°åå°èæ¬ãä¾å¦ä½¿ç¨jQueryæ¶ï¼
[html] view plain copy
$.post('upload.php',{ 'data' : data } );
å¨åå°æ们ç¨PHPèæ¬æ¥æ¶æ°æ®å¹¶åå¨ä¸ºå¾çã
[html] view plain copy
function convert_data($data){
$image = base64_decode( str_replace('data:image/jpeg;base64,', '',$data);
save_to_file($image);
}
function save_to_file($image){
$fp = fopen($filename, 'w');
fwrite($fp, $image);
fclose($fp);
}
请注æï¼ä»¥ä¸ç解å³æ¹æ¡ä¸ä» è½ç¨äºWeb Appæç §ä¸ä¼ ï¼å¹¶ä¸ä½ å¯ä»¥å®ç°æCanvasçè¾åºè½¬æ¢ä¸ºå¾çä¸ä¼ çåè½ãè¿æ ·ä½ å¯ä»¥ä½¿ç¨Canvas为ç¨æ·æä¾å¾çç¼è¾ï¼ä¾å¦è£åªãä¸è²ãæ¶é¸¦çç»æ¿åè½ï¼ç¶åæç¨æ·ç¼è¾å®çå¾çä¿åå°æå¡å¨ä¸ã
1ã è§é¢æµ
HTML5 The Media Capture
APIæä¾äºå¯¹æå头çå¯ç¼ç¨è®¿é®ï¼ç¨æ·å¯ä»¥ç´æ¥ç¨getUserMediaè·å¾æå头æä¾çè§é¢æµãæ们éè¦åçæ¯æ·»å ä¸ä¸ªHTML5çVideoæ
ç¾ï¼å¹¶å°ä»æå头è·å¾è§é¢ä½ä¸ºè¿ä¸ªæ ç¾çè¾å ¥æ¥æºï¼è¯·æ³¨æç®åä» ChromeåOperaæ¯ægetUserMediaãè¡¥å ï¼è¯·ä½¿ç¨Operaæ¯æHTML5çæ°çæ¬ï¼å¦ææ¯Chromeï¼çæ¬é为Chrome 18.0.1008+ï¼å¹¶ä½¿ç¨about:flagsæ¥å¼å¯WebRTCï¼è¯·çä¸å¾ï¼ã
[html] view plain copy
<video id="video" autoplay=""></video>
<script>
var video_element = document.getElementById('video');
if (navigator.getUserMedia) { // opera should use opera.getUserMedia now, chrome use webkitGetUserMedia
navigator.getUserMedia('video',success, error);
}
function success(stream) {
video_element.src =stream;
}
</script>
è§é¢æµ
2ã æç §
æç §åè½ï¼æ们éç¨HTML5çCanvaså®æ¶æè·Videoæ ç¾çå 容ï¼Videoå ç´ è½ä½ä¸ºCanvaså¾åçè¾å ¥ï¼è¿ä¸ç¹å¾æ£ã主è¦ä»£ç å¦ä¸ï¼
[html] view plain copy
<script>
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(canvas);
</script>
3ã å¾çè·å
ä¸é¢æ们è¦ä»Canvasè·åå¾çæ°æ®ï¼å ¶æ ¸å¿æè·¯æ¯ç¨canvasçtoDataURLå°Canvasçæ°æ®è½¬æ¢ä¸ºbase64ä½ç¼ç çPNGå¾åï¼ç±»ä¼¼äºâdata:image/png;base64,xxxxxâçæ ¼å¼ã
[html] view plain copy
var imgData =canvas.toDataURL("image/png");
å 为çæ£å¾åæ°æ®æ¯base64ç¼ç éå·ä¹åçé¨åï¼æ以æ们å®é æå¡å¨å¤ççå¾åæ°æ®åºè¯¥æ¯è¿é¨åï¼æ们å¯ä»¥ç¨ä¸¤ç§åæ³æ¥è·åã
第ä¸ç§ï¼æ¯å¨å端æªå22ä½ä»¥åçå符串ä½ä¸ºå¾åæ°æ®ï¼ä¾å¦ï¼
[html] view plain copy
var data = imgData.substr(22);
å¦æè¦å¨ä¸ä¼ åè·åå¾çç大å°ï¼å¯ä»¥ä½¿ç¨ï¼
[html] view plain copy
var length = atob(data).length;// atob decodes a string of data which has been encoded using base-64 encoding
第äºç§ï¼æ¯å¨å端è·åä¼ è¾çæ°æ®åç¨åå°è¯è¨æªå22ä½ä»¥åçå符串ãä¾å¦PHPéï¼
[html] view plain copy
$image = base64_decode( str_replace('data:image/jpeg;base64,', '',$data);
4ã å¾çä¸ä¼
å¨å端å¯ä»¥ä½¿ç¨Ajaxå°ä¸é¢è·å¾çå¾çæ°æ®ä¸ä¼ å°åå°èæ¬ãä¾å¦ä½¿ç¨jQueryæ¶ï¼
[html] view plain copy
$.post('upload.php',{ 'data' : data } );
å¨åå°æ们ç¨PHPèæ¬æ¥æ¶æ°æ®å¹¶åå¨ä¸ºå¾çã
[html] view plain copy
function convert_data($data){
$image = base64_decode( str_replace('data:image/jpeg;base64,', '',$data);
save_to_file($image);
}
function save_to_file($image){
$fp = fopen($filename, 'w');
fwrite($fp, $image);
fclose($fp);
}
请注æï¼ä»¥ä¸ç解å³æ¹æ¡ä¸ä» è½ç¨äºWeb Appæç §ä¸ä¼ ï¼å¹¶ä¸ä½ å¯ä»¥å®ç°æCanvasçè¾åºè½¬æ¢ä¸ºå¾çä¸ä¼ çåè½ãè¿æ ·ä½ å¯ä»¥ä½¿ç¨Canvas为ç¨æ·æä¾å¾çç¼è¾ï¼ä¾å¦è£åªãä¸è²ãæ¶é¸¦çç»æ¿åè½ï¼ç¶åæç¨æ·ç¼è¾å®çå¾çä¿åå°æå¡å¨ä¸ã
温馨提示:答案为网友推荐,仅供参考