基于Html5的網頁大頭貼
Html5技術越來越侵蝕著這個互聯網，不得不承認，Html5所帶來的改變還是很大的，一次偶然的機會，找到了Html5調用電腦攝像頭的API，于是想到了做一個網頁版大頭貼來實現拍照與簡單修改的功能，初期的版本還比較簡單，大家可以看一下效果。saymagic.sinaapp.com/takephoto/。(注意，要用Chrome瀏覽器！！！)
好的，那接下來我就將介紹下這個的實現過程，代碼已在GitHub上開源，后面會給出下載地址，先聲明一下，該網站運行在sae平臺上，所以圖片的上傳與存儲在用sae的storage，所以下載下來若不是在sae上部署，就會有一些功能用不了，即使用sae的話也需要自己新建storage等，所以 copy黨們注意一下。
這個的代碼量還是不少的，首先，看一下主界面的代碼吧，
就可以了，好的，基本原理就是這樣，說一下每個連接按鈕對應的具體代碼。
1.拍照：（index.html）
3. 重拍：（index.html）
document.getElementById("rephotograph").addEventListener("click", function() {
clearTimeout(timer);
video.play();
}); 4.修改：（index.html）
document.getElementById("change").addEventListener("click", function() {
context.drawImage(video, 0, 0, 440, 330);
}); 5.sae站點（index.html）
啊哦~~link連接==
<a >sae站點</a> $("#download").click(function() {
var myCanvas = document.getElementById("canvas");
var image = myCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
// window.location.href=image;
var filename = 'paint_' + (new Date()).getTime() + '.png';
//saveFile(image, filename);
var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
save_link.href = image;
save_link.download = filename;
var event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
// save_link.dispatchEvent(event);
}); 7.分享到本站(index.js):ps把圖片流上傳到sae的stoarge里。
document.getElementById("share").onclick=function(){
//Ajax提交數據
var xhr=new XMLHttpRequest;
xhr.open("POST","upload.php",true);
xhr.onreadystatechange=function(){
if(xhr.readyState!=4)return;
};
//從canvas中獲取DataURL并發送
xhr.send(canvas.toDataURL());
alert("分享成功!");
}; 8.查看他人分享：（paint/show.php）
這個就是一個連接到paint/show.php頁面，但是生成這個頁面還是有些難度，如果使用本地文件來存儲的話可以遍歷圖片文件下的所有圖片，如果想做高級一點的話就可以實現動態加載，這個是遍歷sae的一個stoarge上的所有圖片，代碼如下：
<?php
$fileTypes = array('jpg','jpeg','gif','png');
$width = 200;
$height = 200;
$pageTitle = "Pictures";
// *************************************************************
$s = new SaeStorage();
$domain = 'takephoto';//我剛創建的domain的名稱
$filelist = $s->getList($domain,"",100);
$f = join(',*.', $fileTypes);
$f = '*.'.$f;
$height += 20;
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title><?php echo $pageTitle; ?></title>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../js/jquery.popImage.mini.js"></script>
<link rel="stylesheet" type="text/css" href="../css/popImage.css" />
<style type="text/css">
<!--
* { margin:0; padding:0; }
h1 { background:#eee; font-weight:normal; padding:3px 5px; font-size:medium; }
ul { margin-top:10px; list-style:none; }
ul li { width:<?php echo $width; ?>px; height:<?php echo $height; ?>px; float:left; padding:5px; overflow:hidden; margin-bottom:10px; }
ul li span { height:20px; font-size:medium; font-style:italic; }
ul li a img { width:<?php echo $width; ?>px; border:dotted 1px #ddd; }
}
-->
</style>
</head>
<body>
<ul>
<?php $loop = 1; foreach($filelist as $name) { ?>
<li>
<span><?php echo $loop; ?></span>
<a href="<?php echo $s->getUrl($domain,$name); ?>" target="_blank" rel="gallery" class="image_gall"><img alt="<?php echo $s->getUrl($domain,$name); ?>" src="<?php echo $s->getUrl($domain,$name); ?>" /></a>
</li>
<?php $loop++; } ?>
</ul>
<script>
$(function(){
$("a.image_gall").popImage();
})
</script>
</body>
</html> 說一下，圖片的展開效果用的是popImage，簡單卻實用的小工具。
最后，GitHub的下載地址。https://github.com/saymagic/takephoto。有什么問題歡迎提出，若有改進，也歡迎大家多多開源。
來自:http://blog.csdn.net/saymagic/article/details/17782903
本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！