程序博客网 > 怎么看淘宝店铺买家秀

调用摄像头 拍照

来源：互联网 发布：怎么看淘宝店铺买家秀 编辑：程序博客网 时间：2024/05/19 13:58
相关例子：  http://www.qdfuns.com/notes/15998/b5ad46a155bf4cec6587cd4871f044c8.html

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




<!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: 2px solid #333; border-radius: 10px;}
        h1,h2{margin: 20px auto; color: #20cbc9; text-align: center;}
        *:focus{
            outline: none;
        }

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

        #snap{
            width: 200px;
            height: 80px;
            border-radius: 20px;
            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(2px);
            -webkit-filter: blur(2px);
            -moz-filter: blur(2px);
            -o-filter: blur(2px);
            -ms-filter: blur(2px);}
        .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(180deg);
            -webkit-filter: hue-rotate(180deg);
            -moz-filter: hue-rotate(180deg);
            -o-filter: hue-rotate(180deg);
            -ms-filter: hue-rotate(180deg);}
        .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: 200px; border: 1px solid #333;}
        .filterall{width: 990px; height: 200px; list-style: none; margin: 0 auto;}
        .filterall li{float: left; margin-right: 10px; cursor: pointer;}
        .filterall li p{text-align: center; color: #fff; font-size: 20px;}
    </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:100px; height:100px;"></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:100px; height:100px;"></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:100px; height:100px;"></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:100px; height:100px;"></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:100px; height:100px;"></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:100px; height:100px;"></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:100px; height:100px;"></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:100px; height:100px;"></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
怎么看淘宝店铺买家秀 怎么看淘宝店铺买家秀
原创粉丝点击
热门IT博客
无人机编队算法无人机编队算法
淘宝网怎么买东西呀淘宝网怎么买东西呀
protobuf数据解析
淘宝宝贝主图尺寸
淘宝10元包邮专区
mac口红chili
淘宝的id是什么
linux串口编程模板
房卡棋牌游戏源码
核聚变 知乎
c语言中各种单词的意思
数据库逻辑模型设计
吉他伴奏软件
pkpm建筑节能设计软件
nginx限制返回大小
微领地网络是不是传销
什么顶级域名最好
淘宝卖家虚假发货
淘宝上下架
手机淘宝上能交电费吗?
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 用了过期卫生巾怎么办 网银盾状态异常怎么办 欠京东2000京豆怎么办 京券过期了怎么办 荒野行动不支持机型怎么办 京东充话费充错怎么办 汽车流量用完了怎么办 近邻宝东西没取完怎么办? 京东自提没去领怎么办 京东银行卡限额怎么办 小米6被锁机了怎么办 小米手机垃圾清不掉怎么办 康佳电视开机黑屏怎么办 京东实名不了怎么办 京东学生认证怎么办 京东次日达没到怎么办 京东京豆负数怎么办 领券达到上限怎么办 京东买东西发票怎么办 京东收货后怎么办 没有买运费险怎么办 1号店卖家发错货不给处理怎么办 买运费险换货怎么办 京东送货不在家怎么办 京东配送不在家怎么办 买南京房子户口怎么办 淘宝买冰箱退货怎么办 橱柜做短了怎么办 面盆下落水管堵塞怎么办 卫生间下水管漏水怎么办 狼视频太卡怎么办 电视红蓝闪烁怎么办 控制不住玩游戏怎么办 sonos更换新网络怎么办 斐讯音响离线怎么办 斐讯ai音箱离线怎么办 ipad声音有杂音怎么办 直播助手不会用怎么办 奔腾x80引擎故障怎么办 自提柜超24小时怎么办 上海没有狗证怎么办

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里