|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
会MYSQL吗?会,我会把我的信息在数据库里插入删除啦
咱们在一些WEB使用中能够会碰到如许的情形,用户需求本人现场摄影并上传到会员体系。好比驾校收集指纹摄影流程、测验现场收集照片等。咱们明天要讲的是若何利用javascript和PHP完成一个复杂的在线摄影并上传的功效。
完成这个功效的条件是你的电脑装备上需求装置有摄像头装备,和你的阅读器需求撑持Flash。
HTML
- <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Javascript+PHP完成
在线摄影
功效
</title> </head> <body> <div id="cam"> <!--挪用
摄像组件并显示图象
--> <input type=button value="点击这里摄影
" class="btn" onclick="take_snapshot()"> </div> <div id="results"> <!--显示上传了局
--> </div> </body> </html>
复制代码 在body中到场一个用于挪用摄像组件的容器id#cam和一个显示上传信息的容器id#results。
Javascript
接上去挪用摄像组件,咱们先载入webcam.js,用于摄影和上传的js库。
- <script type="text/javascript" src="webcam.js"></script>
复制代码 然后在容器id#cam中,到场以下代码:
- <script language="JavaScript"> webcam.set_api_url( 'action.php' ); webcam.set_quality( 90 ); // 图象
质量(1 - 100) webcam.set_shutter_sound( true ); // 摄影
时播放声响
document.write( webcam.get_html(320, 240, 160,120) ); </script>
复制代码 咱们挪用了webcam,个中webcam.set_api_url用来设置图象上传交互的php途径,set_quality可设置图象质量,set_shutter_sound设置声响,get_html输入摄像组件,参数即宽度、高度、上传后宽度、上传后高度。
当点击按钮摄影时,需求履行以下代码:
- <script language="JavaScript"> webcam.set_hook( 'onComplete', 'my_completion_handler' ); function take_snapshot() { document.getElementById('results').innerHTML = '<h4>Uploading...</h4>'; webcam.snap(); } function my_completion_handler(msg) { if (msg.match(/(http\:\/\/\S+)/)) { var image_url = RegExp.$1; document.getElementById('results').innerHTML = '<h4>Upload Successful!</h4>' + '<img src="' + image_url + '">'; webcam.reset(); } else alert("PHP Error: " + msg); } </script>
复制代码 当履行摄影举措时,代码与后台php交互,假如上传图片完成后,则前往响应的信息。
PHP
action.php所做的就是将当地摄影的图象上传到办事器,并将图片途径前往给前端。注重寄存图片的途径要给写权限。
- $filename = date('YmdHis') . '.jpg'; $result = file_put_contents( 'pics/'.$filename, file_get_contents('php://input') ); if (!$result) { print "ERROR: Failed to write data to $filename, check permissions\n"; exit(); } $url = 'http://' . $_SERVER['HTTP_HOST'] . dirname($_SERVER['REQUEST_URI']) . '/pics/' . $filename; print "$url\n";
复制代码 本文只是复杂的引见了下在线摄影和上传功效,其实深切使用场景如上传后再裁剪,生成多张分歧比例的图象等等,人人本人去揣摩吧。
工具程序用来显示 Rasmus Lerdorf 的个人履历,以及统计网页流量。 |
|