HTML5 调用摄像头 抓拍 裁切图片 转为Base64编码


知识点:H5标签:canvas,video;H5 API:navigator.getUseMedia;

思   路:1 video标签的src由navigator.UseMedia提取;(这个src就是base64编码)

           2 canvas drawImage方法 取得video中画面;

     3 canvas_l.toDataURL("image/png")  将canvas转为base64编码

<section class="clear">
    <video id="video" width="640" height="480" controls="controls"></video>
</section>


<div class="can_box">
    <canvas id="canvas_l" width="100" height="25"></canvas>
</div>

<div class="clear"><img class="img" src="" alt="" id="img_l"></div>
<p class="base_64_l  base_64_text">图片的base_64编码:</p>
<div class="picture"><button id="picture">picture</button></div>
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", function() {  
    // Grab elements, create settings, etc.  
    var canvas_l = document.getElementById("canvas_l"),      
        img_l=document.getElementById('img_l'),
        context_l = canvas_l.getContext("2d"),
        video = document.getElementById("video"),  
        videoObj = { "video": true },  
        errBack = function(error) {  
            console.log("Video capture error: ", error.code);   
        };  
        if(navigator.webkitGetUserMedia){//navigator.getUsermedia兼容问题
            navigator.webkitGetUserMedia(videoObj, function(stream){  
                video.src = window.URL.createObjectURL(stream); 
                video.play();
            },errBack);
        }else if(navigator.mozGetUserMedia){
            navigator.mozGetUserMedia(videoObj, function(stream){  
                video.src = window.URL.createObjectURL(stream);  
                video.play();  
            }, errBack); 
        }else if(navigator.getUserMedia){
            navigator.getUserMedia(videoObj, function(stream) {  
                video.src = stream;  
                video.play();  
            }, errBack);  
        }
document.getElementById("picture").addEventListener("click", function () 
    context_l.draeImage(video, 10, 10, 200, 100, 0, 0, 210, 110);//第一个参数video是图片来源,第二、三个是提取图片的X、Y轴的开始点(相对video),第四、五个参数是提取图片的宽度和高度,第六、七个参数是把提取出来的图片放置在canvas的开始位置,第八、九个参数是图片放置的结束位置。
  
img_l.src=canvas_l.toDataURL("image/png");//这个就是base64编码
});
}, false); </script>

 摄像头不能两个浏览器同时调用;

如在谷歌浏览器下可用,想在火狐下试试,就要把谷歌页面关掉,火狐页面才可以调的动摄像头。


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com