PC端 H5实现拍照并上传

最新推荐文章于 2021-10-28 11:15:33 发布

weixin_30908103

最新推荐文章于 2021-10-28 11:15:33 发布

阅读量288

点赞数

原文链接：http://www.cnblogs.com/LiuJL/p/5820864.html

版权

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta content="telephone=no" name="format-detection" />
    <title>测试</title>
</head>
<body>
<video id="video" width="320" height="240" autoplay></video>
<button id="snap">拍摄</button>
<canvas id="canvas" width="320" height="240"></canvas>
<script>
    window.addEventListener("DOMContentLoaded", function() {
        var canvas = document.getElementById("canvas"),//调用canvas接口
                context = canvas.getContext("2d"),
                video = document.getElementById("video"),
                videoObj = { "video": true },
                errBack = function(error) {//错误处理
                    console.log("Video capture error: ", error.code);
                };
        if(navigator.getUserMedia) {//调用html5拍摄接口
            navigator.getUserMedia(videoObj, function(stream) {
                video.src = stream;//摄像机属于视频流，所以当然要输出到html5的video标签中了
                video.play();//开始播放
            }, errBack);
        } else if(navigator.webkitGetUserMedia) { //WebKit内核调用html5拍摄接口
            navigator.webkitGetUserMedia(videoObj, function(stream){
                video.src = window.webkitURL.createObjectURL(stream);//同上
                video.play();//同上
            }, errBack);
        }
        else if(navigator.mozGetUserMedia) { //moz内核调用html5拍摄接口
            navigator.mozGetUserMedia(videoObj, function(stream){
                video.src = window.URL.createObjectURL(stream);//同上
                video.play();//同上
            }, errBack);
        }
    }, false);

    document.getElementById("snap")
            .addEventListener("click", function() {//获取拍照按钮绑定事件
                var canvans = document.getElementById("canvas"),//调用canvas接口
                        context = canvas.getContext("2d");
                context.drawImage(video, 0, 0, 640, 480);//调用canvas接口的drawImage方法绘制当前video标签中的静态图片，其实就是截图

                var imgData = canvans.toDataURL();//获取图片的base64格式的数据
                //这里就可以写上传服务器代码了
            });
</script>
</body>
</html>

转载于:https://www.cnblogs.com/LiuJL/p/5820864.html

weixin_30908103

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
PC端 H5实现拍照并上传

<!DOCTYPE HTML><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=...
复制链接

扫一扫