调用摄像头 拍照

最新推荐文章于 2022-12-14 20:20:28 发布
最新推荐文章于 2022-12-14 20:20:28 发布
阅读量431 收藏
点赞数
分类专栏： js css html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zjl199303/article/details/73322574
版权
js 同时被 3 个专栏收录
67 篇文章 0 订阅
订阅专栏
html
21 篇文章 0 订阅
订阅专栏
css
16 篇文章 0 订阅
订阅专栏

手机端，电脑端  都支持拍照。 微信端不可以，调用微信的拍照接口。




<!DOCTYPE  html >
< html >
< head  lang= "en" >
    < meta  charset= "UTF-8" >
    < title > take photo </ title >
    < style >
        body { background :  url ( "http://img13.360buyimg.com/cms/jfs/t868/250/648027290/292491/5c670a52/5549b7f9N7bc3afed.jpg" );}
        /* 拍照相关组件的样式 */
        video , canvas { background-color :  rgba ( 255 , 255 , 255 , 0.6 );  border :  2 px solid  #333 ;  border-radius :  10 px ;}
        h1 , h2 { margin :  20 px auto ;  color :  #20cbc9 ;  text-align :  center ;}
        * : focus {
            outline :  none ;
        }

        #video , #canvas {
            margin :  20 px auto ;
            border :  1 px solid  #000000 ;
        }

        #snap {
            width :  200 px ;
            height :  80 px ;
            border-radius :  20 px ;
            background-color :  greenyellow ;
            border :  none ;
            margin :  0  auto ;
        }

        #snap , #video , #canvas {
            display :  block ;
        }


        . filter0 {
            filter :  grayscale ( 1 );
            -webkit-filter :  grayscale ( 1 );
            -moz-filter :  grayscale ( 1 );
            -o-filter :  grayscale ( 1 );
            -ms-filter :  grayscale ( 1 );
        }
        . filter1 { filter :  blur ( 2 px );
            -webkit-filter :  blur ( 2 px );
            -moz-filter :  blur ( 2 px );
            -o-filter :  blur ( 2 px );
            -ms-filter :  blur ( 2 px );}
        . filter2 { filter :  saturate ( 3 );
            -webkit-filter :  saturate ( 3 );
            -moz-filter :  saturate ( 3 );
            -o-filter :  saturate ( 3 );
            -ms-filter :  saturate ( 3 );}
        . filter3 {  filter :  sepia ( 0.5 );
            -webkit-filter :  sepia ( 0.5 );
            -moz-filter :  sepia ( 0.5 );
            -o-filter :  sepia ( 0.5 );
            -ms-filter :  sepia ( 0.5 );}
        . filter4 { filter :  hue-rotate ( 180 deg );
            -webkit-filter :  hue-rotate ( 180 deg );
            -moz-filter :  hue-rotate ( 180 deg );
            -o-filter :  hue-rotate ( 180 deg );
            -ms-filter :  hue-rotate ( 180 deg );}
        . filter5 {  filter :  invert ( 1 );
            -webkit-filter :  invert ( 1 );
            -moz-filter :  invert ( 1 );
            -o-filter :  invert ( 1 );
            -ms-filter :  invert ( 1 );}
        . filter6 {  filter :  brightness ( 50 % );
            -webkit-filter :  brightness ( 150 % );
            -moz-filter :  brightness ( 150 % );
            -o-filter :  brightness ( 150 % );
            -ms-filter :  brightness ( 150 % );}
        . filter7 { filter :  contrast ( 0.8 );
            -webkit-filter :  contrast ( 0.8 );
            -moz-filter :  contrast ( 0.8 );
            -o-filter :  contrast ( 0.8 );
            -ms-filter :  contrast ( 0.8 );}
        . filterall { list-style :  none ;}
        . filterlist { width :  100 % ;  height :  200 px ;  border :  1 px solid  #333 ;}
        . filterall { width :  990 px ;  height :  200 px ;  list-style :  none ;  margin :  0  auto ;}
        . filterall li { float :  left ;  margin-right :  10 px ;  cursor :  pointer ;}
        . filterall li p { text-align :  center ;  color :  #fff ;  font-size :  20 px ;}
    </ style >
</ head >
< body >
< h1 > 拍照上传 </ h1 >
< video  id= "video"  width= "480"  height= "320"  autoplay ></ video >
< button  id= "snap" > 截图 </ button >
< canvas  id= "canvas"  width= "480"  height= "320" ></ canvas >
< h2 > 滤镜列表 </ h2 >
< div  class= "filterlist" >
    < ul  class= "filterall"  id= "currentlist" >
        < li >< div >< img  src= "http://img10.360buyimg.com/cms/jfs/t1285/221/79857272/6043/163bd730/5549b83fN5b6f14f0.jpg"  class= "filter0"  style= " width : 100 px ;  height : 100 px ; " ></ div >< p > 黑白照 </ p ></ li >
        < li >< div >< img  src= "http://img10.360buyimg.com/cms/jfs/t1285/221/79857272/6043/163bd730/5549b83fN5b6f14f0.jpg"  class= "filter1"  style= " width : 100 px ;  height : 100 px ; " ></ div >< p > 朦胧 </ p ></ li >
        < li >< div >< img  src= "http://img10.360buyimg.com/cms/jfs/t1285/221/79857272/6043/163bd730/5549b83fN5b6f14f0.jpg"  class= "filter2"  style= " width : 100 px ;  height : 100 px ; " ></ div >< p > 饱和 </ p ></ li >
        < li >< div >< img  src= "http://img10.360buyimg.com/cms/jfs/t1285/221/79857272/6043/163bd730/5549b83fN5b6f14f0.jpg"  class= "filter3"  style= " width : 100 px ;  height : 100 px ; " ></ div >< p > 老照片 </ p ></ li >
        < li >< div >< img  src= "http://img10.360buyimg.com/cms/jfs/t1285/221/79857272/6043/163bd730/5549b83fN5b6f14f0.jpg"  class= "filter4"  style= " width : 100 px ;  height : 100 px ; " ></ div >< p > 色相翻转 </ p ></ li >
        < li >< div >< img  src= "http://img10.360buyimg.com/cms/jfs/t1285/221/79857272/6043/163bd730/5549b83fN5b6f14f0.jpg"  class= "filter5"  style= " width : 100 px ;  height : 100 px ; " ></ div >< p > X 光 </ p ></ li >
        < li >< div >< img  src= "http://img10.360buyimg.com/cms/jfs/t1285/221/79857272/6043/163bd730/5549b83fN5b6f14f0.jpg"  class= "filter6"  style= " width : 100 px ;  height : 100 px ; " ></ div >< p > 高亮 </ p ></ li >
        < li >< div >< img  src= "http://img10.360buyimg.com/cms/jfs/t1285/221/79857272/6043/163bd730/5549b83fN5b6f14f0.jpg"  class= "filter7"  style= " width : 100 px ;  height : 100 px ; " ></ div >< p > 均衡感 </ p ></ li >
    </ ul >

</ div >
< img  src= ""  width= "200"  height= "200"  id= "test" >
<!-- 拍照功能需要配合 javascript 使用 -->
< script  type= "text/javascript" >
    /**
     * Created by Rodger on 2015/2/26.
     */

    /*
     ** 这是第一种写法，下面有一种更好的写法
     window.addEventListener('DOMContentLoaded',function(){
     var canvas=document.getElementById('canvas'),
     video=document.getElementById('video'),
     context=canvas.getContext('2d'),
     videoObj={'video':true},
     errBack= function (error) {
     console.log('Video capture error:',error.code);
     };

     if(navigator.getUserMedia){
     navigator.getUserMedia(videoObj,function(stream){
     video.src=stream;
     video.play();
     },errBack)
     }else if(navigator.webkitGetUserMedia){
     navigator.webkitGetUserMedia(videoObj,function(stream){
     video.src=window.webkitURL.createObjectURL(stream);
     video.play();
     },errBack)
     }else if(navigator.mozGetUserMedia){
     navigator.mozGetUserMedia(videoObj,function(stream){
     video.src=window.URL.createObjectURL(stream);
     video.play();
     },errBack)
     };

     document.getElementById('snap').addEventListener('click',function(){
     context.drawImage(video,0,0,640,480);
     })
     },false)
     */

    // 下面的代码比上面的更加简洁和统一
    window . addEventListener ( 'DOMContentLoaded' , function (){
        // 获取要控制的 DOM 对象
        var  canvas = document . getElementById ( 'canvas' ),
                context = canvas . getContext ( '2d' ),
                video = document . getElementById ( 'video' ),
        // 这是 getUserMedia 的第一个参数 constraints 的值
                videoObj = { 'video' :true },
                errBack =function (error){
                    console . log ( 'video capture error:' ,error. code );
                }
        /*
         ** 这种直接把 navigator 的各种 getUserMedia 函数直接赋值给 getUserMedia 是不行的
         *
         var getUserMedia=navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedia;

         getUserMedia(videoObj,function(localMediaStream){
         video.src=window.URL.createObjectURL(localMediaStream);
         video.play();
         },errBack);

         */

        navigator . myGetUserMedia = navigator .getUserMedia || navigator .webkitGetUserMedia || navigator .mozGetUserMedia || navigator .msGetUserMedia;

        navigator . myGetUserMedia ( videoObj , function (localMediaStream){
            /* 并不是每个 window 都有 URL 对象 , 要加上浏览器前缀
             **video.src=window.URL.createObjectURL(localMediaStream);
             * */
            window . URL = window . URL || window .webkitURL || window .mozURL || window .msURL;
            video . src = window . URL .createObjectURL(localMediaStream);
            video . play ();
        }, errBack );

        video . onloadedmetadata =function (e){
            var  snapBtn = document . getElementById ( 'snap' );
            snapBtn . addEventListener ( 'click' , function (){
                context . drawImage ( video , 0 , 0 , 480 , 320 );
                var  image  = new  Image ();
                image . src  =  canvas . toDataURL ( "image/png" );
                var  testimg = document . getElementById ( 'test' );
                testimg . src = image . src ;
            })
        };
    })

    var  EventUtil = {
        addHandler :function (element,type,handler){
            if (element. addEventListener ){element. addEventListener (type,handler, false );}
            else if (element. attachEvent ){element. attachEvent ( "on" + type,handler);} else {element[ "on" + type] = handler;}
        },
        removeHandler :function (element,type,handler){
            if (element. removeEventListener ){element. removeEventListener (type,handler, false );}
            else if (element. detachEvent ){element. detachEvent ( "on" + type,handler);} else {element[ "on" + type] =null ;}
        },
        getEvent :function (event){
            return  event ?  event : window . event ;  /* 获取事件对象 */
        },
        getTarget :function (event){
            return  event. target || event. srcElement ;  /* 获取目标元素 */
        },
        preventDefault :function (event){      /* 取消事件的默认设置 */
            if (event. preventDefault ){
                event. preventDefault ();
            } else {
                event. returnValue =false ;
            }
        },
        stopPropagation :function (event){      /* 取消事件冒泡 */
            if (event. stopPropagation ){
                event. stopPropagation ();
            } else {
                event. cancelBubble =true ;
            }
        }
    };

    var  currentlist = document . getElementById ( 'currentlist' );
    EventUtil . addHandler ( currentlist , "click" , function (e){
        var  classnames = EventUtil . getTarget (e). className ;
        var  videos = document . getElementById ( 'video' );
        var  can = document . getElementById ( 'canvas' );
        videos . className = classnames ;
        can . className = classnames ;
    });
</ script >
</ body >
</ html >
羽下佳人
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5调用手机摄像头拍照
04-01
HTML5 The Media Capture API提供了对摄像头的可编程访问，用户可以直接用getUserMedia获得摄像头提供的视频流。具体内容参考： http://blog.sina.com.cn/s/blog_4ad7c2540101lnak.html
第一行代码Android 第八章8.3.1 调用摄像头拍照
XXX_17的博客
07-26 524
Android：调用摄像头拍照
js 如何调用摄像头拍照
m0_72436362的博客
12-14 4807
js 调用电脑摄像头
HTML5调用本地摄像头拍照
11-18
兼容各大主浏览器，要部署在服务器上才可以调用到摄像头
html5调用摄像头实现拍照
07-12
html5调用摄像头实现拍照，亲测可行。正式部署需要使用https
Android调用摄像头拍照开发教程
08-27
Android调用摄像头拍照开发教程 Android 调用摄像头拍照开发教程主要为大家详细介绍了 Android 调用摄像头拍照的开发教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。 一、 Android 摄像头拍照开发教程...
C#使用Aforge调用摄像头拍照的方法
08-26
C#使用Aforge调用摄像头拍照的方法 本篇文章主要向大家详细介绍了使用C#语言调用Aforge框架来实现摄像头拍照的方法。通过本文，读者可以了解到使用Aforge框架来捕捉摄像头信号、拍照并将其显示在Winform窗体上的...
ASP调用摄像头拍照并保存
08-08
在ASP中调用摄像头拍照并保存的功能，对于在线交互式应用，如用户头像上传、远程会议或者在线教学等场景非常实用。这个功能的实现通常需要借助第三方组件或JavaScript库，以及一些服务器端处理图片的脚本。 首先，`...
多种方式ASP调用摄像头拍照并保存插件
08-08
标题中的“多种方式ASP调用摄像头拍照并保存插件”是指在不同的Web开发环境中，如ASP、ASP.NET、JSP和PHP，实现调用用户电脑或服务器上的摄像头进行拍照，并将拍摄的照片保存到服务器的技术解决方案。这个插件可能...
java调用摄像头拍照
06-30
在Java编程环境中，调用摄像头拍照是一项常见的任务，特别是在开发涉及多媒体处理的应用程序时。本文将深入探讨如何在Java中实现这一功能，并提供相关的技术细节和步骤。 首先，要理解Java本身并不直接支持访问硬件...
web页面调用摄像头拍照
06-29
通过jquery摄像头插件实现无插件调用usb摄像头进行拍照，
html5实现摄像头拍照并使用java进行照片保存
03-16
代码只是关键代码，并不能直接使用，可以拷贝到javaweb项目中使用
调用摄像头拍照以及上传图片
liya_xin的博客
09-20 693
public void Photo() { head_tou = (ImageView) findViewById(R.id.img); head_tou.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View
利用摄像头拍照并保存
Shy_Big_Boy的博客
03-06 9516
利用OpenCV调用笔记本自带的摄像头进行拍照，并且保存到本地文件夹。程序完整代码如下：#include #include #include #include #include using namespace cv; using namespace std; int main(int argc, char* argv) { VideoCapture capture(0); Mat frame;
Android开发之拍照
犬小哈
01-19 372
1.请求使用相机的权限若使用相机是应用的必要功能，想要它在应用Google player里仅对有相机的设备的可见。我们可以在清单文件（Manifest）中添加标签： <manifest ... > <uses-feature android:name="android.hardware.camera" android:required="true" />
HTML 5调用摄像头并进行拍照
dawuafang
07-01 857
一般情况下，DOMContentLoaded事件要在window.onload之前执行，当DOM树构建完成的时候就会执行DOMContentLoaded事件，而window.onload是在页面载入完成的时候，才执行，这其中包括图片等元素。大多数时候我们只是想在DOM树构建完成后，绑定事件到元素，我们并不需要图片元素，加上有时候加载外域图片的速度非常缓慢。 &lt;!DOCTYPE html&...
调用摄像头拍照
YangDeAndroid的博客
11-04 535
调用摄像头的具体逻辑，如下所示： public class MainActivity extends Activity { public static final int TAKE_PHOTO = 1; public static final int CROP_PHOTO = 2; private Button takePhoto; private ImageView picture;
vba调用摄像头拍照
最新发布
09-10
然而，VBA本身并不直接支持调用摄像头拍照的功能。要在VBA中实现这个目标，我们需要借助一些其他的工具和技术。 一种方法是利用VBA与Windows API函数进行交互。通过调用一些特定的API函数，我们可以实现在VBA中调用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值