A. HTML5+CSS3小實例：抽屜式相冊
HTML5+CSS3小實例：抽屜式相冊
技術棧：HTML+CSS
效果：
源碼：
B. 用html5怎麼在移動端打開相機
HTML5如何在移動網頁端調用手機圖片或者camera可以參考這篇文章：
如果你開始基於iOS系統(ios6 above) 的web應用，可以考慮這段代碼：
點擊按鈕，會調用你的攝像頭相冊
附源碼文件：
<input type="file" capture="camera" accept="image/*" id="cameraInput" name="cameraInput">
C. 那位大神分享一個html5調用手機端相機和相冊的方法，感激不盡啊
1）獲取視頻流
添加一個HTML5的Video標簽，並將從攝像頭獲得視頻作為這個標簽的輸入來源
var video = document.getElementByIdx_x_x("video");
navigator.getUserMedia({video:true}, function (stream) {
video.src = window.webkitURL.createObjectURL(stream);
}, function (error) { alert(error); });
2）拍照
關於拍照功能，採用HTML5的Canvas實時捕獲Video標簽的內容，Video元素能作為Canvas圖像的輸入
function scamera() {
var videoElement = document.getElementByIdx_x_x('video');
var canvasObj = document.getElementByIdx_x_x('canvas1');
var context1 = canvasObj.getContext('2d');
context1.fillStyle = "#ffffff";
context1.fillRect(0, 0, 320, 240);
context1.drawImage(videoElement, 0, 0, 320, 240);
}
3）圖片獲取
要從Canvas獲取圖片數據，其核心思路是用canvas的toDataURL將Canvas的數據轉換為base64位編碼的PNG圖像
var imgData=canvas.toDataURL(「image/png」);
imgData格式如下：」data:image/png;base64,xxxxx「
真正圖像數據是base64編碼逗號之後的部分
D. Html有沒有源碼可以自動獲取手機相冊
html5 可以
要從Canvas獲取圖片數據，其核心思路是用canvas的toDataURL將Canvas的數據轉換為base64位編碼的PNG圖像
var imgData=canvas.toDataURL(「image/png」);
imgData格式如下：
」data:image/png;base64,xxxxx「
真正圖像數據是base64編碼逗號之後的部分
可以試一下
E. html5 3d旋轉相冊代碼怎麼用
以下是代碼：
<!DOCTYPE html>
<html>
<head>
<title>transform-style實現Div的3D旋轉-柯樂義</title>
<style>
*{font-size: 24px;color: #00ff00; padding:0; margin:0;}
#container {
position: relative;
height: 300px;
width: 300px;
-webkit-perspective: 500;
margin-top: 200px;
margin-right: auto;
margin-left: auto;
}
#parent-keleyi-com {
margin: 10px;
width: 280px;
height: 280px;
background-color: #666;
opacity: 0.3;
-webkit-transform-style: preserve-3d;
-webkit-animation: spin 15s infinite linear;
}
#parent-keleyi-com > div {
position: absolute;
top: 40px;
left: 40px;
width: 280px;
height: 200px;
padding: 10px;
-webkit-box-sizing: border-box;
}
#parent-keleyi-com > :first-child {
background-color: #000;
-webkit-transform: translateZ(-100px) rotateY(45deg);
}
#parent-keleyi-com > :last-child {
background-color: #333;
-webkit-transform: translateZ(50px) rotateX(20deg);
-webkit-transform-origin: 50% top;
}
/*執行Y軸旋轉360度動畫*/
@-webkit-keyframes spin {
from {-webkit-transform: rotateY(0);}
to {-webkit-transform: rotateY(360deg);}
}
</style>
</head>
<body>
<div>請使用支持CSS3的瀏覽器<a href="http://keleyi.com/a/bjad/s89uo4t1.htm" target="_blank">原文</a></div>
<div id="container">
<div id="parent-keleyi-com">
<div><a href="/">柯樂義</a></div>
<div><a href="/">keleyi.com</a></div>
</div>
</div>
</body>
</html>
F. 怎麼做HTML5 3D立體圖片相冊
從基礎學起 html css3中的3D變換 JavaScript
G. html5怎樣調用手機攝像頭或者相冊
今天做手機網站，想實現手機掃描二維碼功能。首先實現在瀏覽器中調用手機攝像頭，實現拍照功能並且把拍下的照片顯示在頁面並上傳到伺服器上，然後再在伺服器端進行分析。
首先實現在瀏覽器中調用攝像頭，當然用現在火的不行的html5，html5中的<video>標簽，並將從攝像頭獲得視頻作為這個標簽的輸入來源。實現拍照功能的html5代碼：
<article>
<style scoped>
video { transform: scaleX(-1); }
p { text-align: center; }
</style>
<h1>Snapshot Kiosk</h1>
<section id="splash">
<p id="errorMessage">Loading...</p>
</section>
<section id="app" hidden>
<p><video id="monitor" autoplay></video> <canvas id="photo"></canvas>
<p><input type=button value="📷" onclick="snapshot()">
</section>
<script>
navigator.getUserMedia({video:true}, gotStream, noStream);
var video = document.getElementById('monitor');
var canvas = document.getElementById('photo');
function gotStream(stream) {
video.src = URL.createObjectURL(stream);
video.onerror = function () {
stream.stop();
};
stream.onended = noStream;
video.onloadedmetadata = function () {
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
document.getElementById('splash').hidden = true;
document.getElementById('app').hidden = false;
};
}
function noStream() {
document.getElementById('errorMessage').textContent = 'No camera available.';
}
function snapshot() {
canvas.getContext('2d').drawImage(video, 0, 0);
}
</script>
</article>
經本人測試在android手機的opera瀏覽器瀏覽器下可以正常實現手機拍照功能。android手機下的google chrome瀏覽器還不行，自帶的瀏覽器也測試沒有通過。iphone手機的safari瀏覽器也是不支持的。
H. HTML5+CSS3小實例：3D旋轉木馬相冊
HTML5+CSS3做一個3D旋轉木馬相冊，滑鼠懸停時，停止旋轉，移開繼續旋轉，大家把圖片替換成自己的即可。
效果：
源碼：
I. html5移動端調用手機相冊和相機
需要載入cordova.js
方法：
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
pictureSource = navigator.camera.PictureSourceType;
destinationType = navigator.camera.DestinationType;
}
//相冊
function fromCamera()
{
var source = pictureSource.PHOTOLIBRARY;
navigator.camera.getPicture(function (imageData) {
setimg(imageData);
}, function (message) {
if (source == pictureSource.CAMERA)
alert('載入照相機出錯!' + message);
else
alert('載入相冊出錯!' + message);
}, {
quality: 50,
destinationType: destinationType.FILE_URI,
sourceType: source
});
}
//拍照
function EditImgPz()
{
navigator.camera.getPicture(function (imageData) {
setimg(imageData);
}, function (message) {
alert(message);
}, {
quality: 50,
destinationType: navigator.camera.DestinationType.FILE_URI,
sourceType: Camera.PictureSourceType.CAMERA,
allowEdit: true,
encodingType: Camera.EncodingType.JPEG,
popoverOptions: CameraPopoverOptions,
saveToPhotoAlbum: true
});
}