最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

基于jQuery+PHP在线拍照

来源:http://www.erdangjiade.com/ 沐浴春风 2015-04-07 21:06浏览(1604)

今天介绍一款摄像头插件,并且结合PHP实现一个简单的在线拍照并上传的功能,前提你的电脑要有摄像头哦!~

0、请不要问“在不在”之类的问题,有问题直接问!1、学生或暂时没有工作的童鞋,整站资源免费下载!2、¥9.9充值终身VIP会员,加我微信,826096331 拉你进VIP群学习!3、程序员加油,技术改变世界。在线 充值

基于jQuery+PHP在线拍照
分类:其它特效 > 在线拍照 难易:中级
查看演示 下载资源 下载积分: 30 积分

HTML

我们在页面中放置一个摄像头拍照按钮,并把照片放在#results里面

<div id="cam">  
  <!--调用摄像组件并显示图像-->  
  webcam.set_api_url('ajax.php');//远程上传图片 
  webcam.set_quality(100); // 图像质量(1 - 100)  
  webcam.set_shutter_sound(true); // 拍照时播放声音  
  document.write(webcam.get_html(320, 240, 160, 120));//输出摄像组件,参数即宽度、高度、上传后宽度、上传后高度 
  <input type=button value="点击这里拍照" class="btn" onclick="take_snapshot()">  
</div>  
<div id="results"> <!--显示上传结果--> </div>

jQuery

接下来调用摄像头组件。

<script type="text/javascript" src="webcam.js"></script>

我们看下点击拍照时执行的函数:

webcam.set_hook('onComplete''my_completion_handler'); 
 
function take_snapshot() { 
    $("#results").html('上传中...'); 
    webcam.snap(); 
} 
 
function my_completion_handler(msg) { 
    $("#results").html('<img src="' + msg + '"/>'); 
}

Ajax.php

远程将拍照的图像上传到服务器,并将图片路径返回给前端。注意存放图片的路径要给写权限。特别是linux服务器哦~

$filename = date('YmdHis') . '.jpg'
$file ='uploads/'
$result = file_put_contents( $file.$filename, file_get_contents('php://input') ); 
 
echo $file.$filename;
标签: 拍照摄像webcam
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/38.html
评论2
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

  • 头像 椅子
    12-12 09:32
    DawnZhao
    很棒,值得学习一下。
  • 头像 沙发
    05-29 08:21
    dilimic
    效果不错,如果移动端也能支持,那就不错<br />
1 2