【上传文件】H5前端开发实现拍照上传照片

html5手机前端开发框架|html5前端开发薪资怎么样?|html5 css3 前端开发工具

html5有拍照的API而且非常简单,兼容性还是挺好的,不过safari不兼容,这个还是蛮让人恼火的。把这个结合canvas和video标签,就完美实现了。代码如下,直接运行即可。建议用FF17以上版本或者chrome18以上版本运行。
代码片段 1

<!DOCTYPE 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” />
<metac ontent=”telephone=no” name=”format-detection” />
<title>前端开发必备技术:HTML5</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);
}elseif (navigator.webkitGetUserMedia) {//WebKit内核调用html5拍摄接口
navigator.webkitGetUserMedia(videoObj,function(stream){
video.src=window.webkitURL.createObjectURL(stream);//同上
video.play();//同上
},errBack);
}elseif (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(){//获取拍照按钮绑定事件
varcanvans=document.getElementById(“canvas”),//调用canvas接口
context=canvas.getContext(“2d”);
context.drawImage(video,0,0,640,480);//调用canvas接口的drawImage方法绘制当前video标签中的静态图片,其实就是截图
varimgData=canvans.toDataURL();//获取图片的base64格式的数据
//这里就可以写上传服务器代码了
});
</script>
</body>
</html>

顺便记下几个html5比较使用的api
全屏显示
代码片段 2

<!DOCTYPE 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>开发前端接口怎么做:html5</title>
</head>
<body>
    <a id=”test” href=”#”>全屏</a>
    <script>
        function launchFullScreen(element) {
            if (element.requestFullScreen) {
                element.requestFullScreen();
            } else if (element.mozRequestFullScreen) {
                element.mozRequestFullScreen();
            } else if (element.webkitRequestFullScreen) {
                element.webkitRequestFullScreen();
            }
        }
        document.getElementById(“test”).onclick = function () {
            launchFullScreen(document.documentElement);
        }
        // 在支持的浏览器中启动全屏
        //launchFullScreen(document.documentElement); // 整个页面
        //launchFullScreen(document.getElementById(“videoElement”)); // 单个元素
    </script>
</body>
</html>

获取笔记本电脑的电池信息
代码片段 3

<!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>
    <script>
        var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery;
        // 一组非常有用的电池属性
        console.warn(“Battery charging: “, battery.charging); // true
        console.warn(“Battery level: “, battery.level); // 0.58
        console.warn(“Battery discharging time: “, battery.dischargingTime);
        // 监听电池状态
        battery.addEventListener(“chargingchange”, function (e) {
            console.warn(“Battery charge change: “, battery.charging);
        }, false);
    </script>
</body>
</html>
html5网页前端开发|web前端开发应聘简历|前端开发简历模板范文
» 本文来自:前端开发者 » 《【上传文件】H5前端开发实现拍照上传照片》
» 本文链接地址:https://www.rokub.com/3794.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!