基于Html5的网页大头贴

最新推荐文章于 2023-03-18 09:45:23 发布

saymagic

最新推荐文章于 2023-03-18 09:45:23 发布

阅读量5.8k

点赞数 1

分类专栏：原创应用文章标签： html5 html5技术摄像头 sae 互联网

本文链接：https://blog.csdn.net/saymagic/article/details/17782903

版权

Html5技术越来越侵蚀着这个互联网，不得不承认，Html5所带来的改变还是很大的，一次偶然的机会，找到了Html5调用电脑摄像头的API，于是想到了做一个网页版大头贴来实现拍照与简单修改的功能，初期的版本还比较简单，大家可以看一下效果。saymagic.sinaapp.com/takephoto/。(注意，要用Chrome浏览器！！！)

好的，那接下来我就将介绍下这个的实现过程，代码已在GitHub上开源，后面会给出下载地址，先声明一下，该网站运行在sae平台上，所以图片的上传与存储在用sae的storage，所以下载下来若不是在sae上部署，就会有一些功能用不了，即使用sae的话也需要自己新建storage等，所以copy党们注意一下。

这个的代码量还是不少的，首先，看一下主界面的代码吧，

<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6 lt8"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7 lt8"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8 lt8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="UTF-8" />
        <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  -->
        <title>Login and Registration Form with HTML5 and CSS3 Demo</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <meta name="description" content="Login and Registration Form with HTML5 and CSS3" />
        <meta name="keywords" content="html5, css3, form, switch, animation, :target, pseudo-class" />
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
        <link rel="stylesheet" type="text/css" href="css/style2.css" />
		<link rel="stylesheet" type="text/css" href="css/animate-custom.css" />
		<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
		<script type="text/javascript" src="js/jquery.popImage.mini.js"></script>	
		<link href="index.css" rel="stylesheet" type="text/css">
		<script language="javascript"&