HTML5技術支持WebApp在手機上拍照，顯示在頁面上并上傳到服務器。這是手機微博應用中常見的功能，當然你也可以在其它類型應用中適當使用此技術。
成都創(chuàng)新互聯(lián)公司，專注為中小企業(yè)提供官網(wǎng)建設、營銷型網(wǎng)站制作、響應式網(wǎng)站建設、展示型成都網(wǎng)站設計、成都做網(wǎng)站等服務，幫助中小企業(yè)通過網(wǎng)站體現(xiàn)價值、有效益。幫助企業(yè)快速建站、解決網(wǎng)站建設與網(wǎng)站營銷推廣問題。
1、 視頻流
HTML5 的 The Media Capture（媒體捕捉） API 提供了對攝像頭的可編程訪問，用戶可以直接用 getUserMedia（請注意目前僅Chrome和Opera支持）獲得攝像頭提供的視頻流。我們需要做的是添加一個HTML5 的 Video 標簽，并將從攝像頭獲得的視頻作為這個標簽的輸入來源。
video id=”video” autoplay=”"/video
script
var video_element=document.getElementById(‘video’);
if(navigator.getUserMedia){ // opera應使用opera.getUserMedianow
navigator.getUserMedia(‘video’,success,error); //success是回調(diào)函數(shù),當然你也可以直接在此寫一個匿名函數(shù)
}
function success(stream){
video_element.src=stream;
}
/script
此時，video 標簽內(nèi)將顯示動態(tài)的攝像視頻流。下面需要進行拍照了。
2、 拍照
拍照是采用HTML5的Canvas功能，實時捕獲Video標簽的內(nèi)容，因為Video元素可以作為Canvas圖像的輸入，所以這一點很好實現(xiàn)。主要代碼如下：
var canvas=document.createElement(‘canvas’); //動態(tài)創(chuàng)建畫布對象
var ctx=canvas.getContext(’2d’);
var cw=vw,ch=vh;
ctx.fillStyle=”#ffffff”;
ctx.fillRect(0,0,cw,ch);
ctx.drawImage(video_element,0,0,cw,ch,0,0,vw,vh); //將video對象內(nèi)指定的區(qū)域捕捉繪制到畫布上指定的區(qū)域，可進行不等大不等位的繪制。
document.body.append(canvas);
3、 圖片獲取
從Canvas獲取圖片數(shù)據(jù)的核心思路是用canvas的toDataURL將Canvas的數(shù)據(jù)轉換為base64位編碼的PNG圖像，類似于“data:image/png;base64,xxxxx”的格式。
var imgData=canvas.toDataURL(“image/png”);
這樣，imgData變量就存儲了一長串的字符數(shù)據(jù)內(nèi)容，表示的就是一個PNG圖像的base64編碼。因為真正的圖像數(shù)據(jù)是base64編碼逗號之后的部分，所以要讓實際服務器接收的圖像數(shù)據(jù)應該是這部分，我們可以用兩種辦法來獲取。
第一種：是在前端截取22位以后的字符串作為圖像數(shù)據(jù)，例如：
var data=imgData.substr(22);
如果要在上傳前獲取圖片的大小，可以使用：
var length=atob(data).length; //atob 可解碼用base-64解碼的字串
第二種：是在后端獲取傳輸?shù)臄?shù)據(jù)后用后臺語言截取22位以后的字符串（也就是在前臺略過上面這步直接上傳）。例如PHP里：
$image=base64_decode(str_replace(‘data:image/jpeg;base64,’,”,$data);
4、 圖片上傳
在前端可以使用Ajax將上面獲得的圖片數(shù)據(jù)上傳到后臺腳本。例如使用jQuery時可以用：
$.post(‘upload.php’,{‘data’:data});
在后臺我們用PHP腳本接收數(shù)據(jù)并存儲為圖片。
function convert_data($data){
$image=base64_decode(str_replace(‘data:image/jpeg;base64,’,”,$data);
save_to_file($image);
}
function save_to_file($image){
$fp=fopen($filename,’w');
fwrite($fp,$image);
fclose($fp);
}
以上的解決方案不僅能用于Web App拍照上傳，也可以通過Canvas的編輯功能函數(shù)提供圖片編輯，例如裁剪、上色、涂鴉、圈點等功能，然后把用戶編輯完的圖片上傳保存到服務器上。
在還在不斷補充修正的HTML5的驅動下，Web App與Native App之間的距離將越來越小。在可預見的不遠的未來，越來越多老的和新的開發(fā)項目必將會遷移到WEB應用上來。
相關規(guī)范：
（為便于閱讀，對原文進行了不失原意的適當修改，包括代碼中一些錯誤的重復，并作了注釋）
HTML5技術支持WebApp在手機上拍照，顯示在頁面上并上傳到服務器。這是手機微博應用中常見的功能，當然你也可以在其它類型應用中適當使用此技術。
1、 視頻流
HTML5 的 The Media Capture（媒體捕捉） API 提供了對攝像頭的可編程訪問，用戶可以直接用 getUserMedia（請注意目前僅Chrome和Opera支持）獲得攝像頭提供的視頻流。我們需要做的是添加一個HTML5 的 Video 標簽，并將從攝像頭獲得的視頻作為這個標簽的輸入來源。
video id=”video” autoplay=”"/video
script
var video_element=document.getElementById(‘video’);
if(navigator.getUserMedia){ // opera應使用opera.getUserMedianow
navigator.getUserMedia(‘video’,success,error); //success是回調(diào)函數(shù),當然你也可以直接在此寫一個匿名函數(shù)
}
function success(stream){
video_element.src=stream;
}
/script
此時，video 標簽內(nèi)將顯示動態(tài)的攝像視頻流。下面需要進行拍照了。
2、 拍照
拍照是采用HTML5的Canvas功能，實時捕獲Video標簽的內(nèi)容，因為Video元素可以作為Canvas圖像的輸入，所以這一點很好實現(xiàn)。主要代碼如下：
var canvas=document.createElement(‘canvas’); //動態(tài)創(chuàng)建畫布對象
var ctx=canvas.getContext(’2d’);
var cw=vw,ch=vh;
ctx.fillStyle=”#ffffff”;
ctx.fillRect(0,0,cw,ch);
ctx.drawImage(video_element,0,0,cw,ch,0,0,vw,vh); //將video對象內(nèi)指定的區(qū)域捕捉繪制到畫布上指定的區(qū)域，可進行不等大不等位的繪制。
document.body.append(canvas);
3、 圖片獲取
從Canvas獲取圖片數(shù)據(jù)的核心思路是用canvas的toDataURL將Canvas的數(shù)據(jù)轉換為base64位編碼的PNG圖像，類似于“data:image/png;base64,xxxxx”的格式。
var imgData=canvas.toDataURL(“image/png”);
這樣，imgData變量就存儲了一長串的字符數(shù)據(jù)內(nèi)容，表示的就是一個PNG圖像的base64編碼。因為真正的圖像數(shù)據(jù)是base64編碼逗號之后的部分，所以要讓實際服務器接收的圖像數(shù)據(jù)應該是這部分，我們可以用兩種辦法來獲取。
第一種：是在前端截取22位以后的字符串作為圖像數(shù)據(jù)，例如：
var data=imgData.substr(22);
如果要在上傳前獲取圖片的大小，可以使用：
var length=atob(data).length; //atob 可解碼用base-64解碼的字串
第二種：是在后端獲取傳輸?shù)臄?shù)據(jù)后用后臺語言截取22位以后的字符串（也就是在前臺略過上面這步直接上傳）。例如PHP里：
$image=base64_decode(str_replace(‘data:image/jpeg;base64,’,”,$data);
4、 圖片上傳
在前端可以使用Ajax將上面獲得的圖片數(shù)據(jù)上傳到后臺腳本。例如使用jQuery時可以用：
$.post(‘upload.php’,{‘data’:data});
在后臺我們用PHP腳本接收數(shù)據(jù)并存儲為圖片。
function convert_data($data){
$image=base64_decode(str_replace(‘data:image/jpeg;base64,’,”,$data);
save_to_file($image);
}
function save_to_file($image){
$fp=fopen($filename,’w');
fwrite($fp,$image);
fclose($fp);
}
以上的解決方案不僅能用于Web App拍照上傳，也可以通過Canvas的編輯功能函數(shù)提供圖片編輯，例如裁剪、上色、涂鴉、圈點等功能，然后把用戶編輯完的圖片上傳保存到服務器上。
在還在不斷補充修正的HTML5的驅動下，Web App與Native App之間的距離將越來越小。在可預見的不遠的未來，越來越多老的和新的開發(fā)項目必將會遷移到WEB應用上來。
ios拍照默認是旋轉的，有個exif的插件是專門解決這個問題的。js版連接:?網(wǎng)頁鏈接，里面有使用教程。通過這個判斷照片的旋轉角度之后，可以把它旋轉過來再保存，教程：網(wǎng)頁鏈接。如果只有預覽需求，直接旋轉容器進行顯示也是可以的。
用input type=file capture=camcorder調(diào)用攝像頭，會先讓你選擇拍照或者從相冊選取。
首先實現(xiàn)在瀏覽器中調(diào)用手機攝像頭，實現(xiàn)拍照功能并且把拍下的照片顯示在頁面并上傳到服務器上，然后再在服務器端進行分析。
首先實現(xiàn)在瀏覽器中調(diào)用攝像頭，當然用現(xiàn)在火的不行的html5，html5中的video標簽，并將從攝像頭獲得視頻作為這個標簽的輸入來源。實現(xiàn)拍照功能的html5代碼：
article
style scoped
video { transform: scaleX(-1); }
p { text-align: center; }
/style
h1Snapshot Kiosk/h1
section id="splash"
p id="errorMessage"Loading.../p
/section
section id="app" hidden
pvideo id="monitor" autoplay/video canvas id="photo"/canvas
pinput 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
經(jīng)本人測試在android手機的opera瀏覽器瀏覽器下可以正常實現(xiàn)手機拍照功能。android手機下的google chrome瀏覽器還不行，自帶的瀏覽器也測試沒有通過。iphone手機的safari瀏覽器也是不支持的。
想了解更多關于html5調(diào)用手機攝像頭的內(nèi)容可以點擊。
圖片的獲?。?/p>
下面我們要從Canvas獲取圖片數(shù)據(jù)，其核心思路是用canvas的toDataURL將Canvas的數(shù)據(jù)轉換為base64位編碼的PNG圖像，類似于“data:image/png;base64,xxxxx”的格式。
Html代碼
var imgData =canvas.toDataURL("image/png");
因為真正圖像數(shù)據(jù)是base64編碼逗號之后的部分，所以我們實際服務器處理的圖像數(shù)據(jù)應該是這部分，我們可以用兩種辦法來獲取。
第一種：是在前端截取22位以后的字符串作為圖像數(shù)據(jù)，例如：
Html代碼
var data = imgData.substr(22);
如果要在上傳前獲取圖片的大小，可以使用：
Html代碼
var length = atob(data).length;// atob decodes a string of data which has been encoded using base-64 encoding
第二種：是在后端獲取傳輸?shù)臄?shù)據(jù)后用后臺語言截取22位以后的字符串。例如PHP里
php代碼:
$image = base64_decode( str_replace('data:image/jpeg;base64,', '',$data);
圖片上傳：
在前端可以使用Ajax將上面獲得的圖片數(shù)據(jù)上傳到后臺腳本。例如使用jQuery時：
js代碼
$.post('upload.php',{ 'data' : data } );
在后臺我們用PHP腳本接收數(shù)據(jù)并存儲為圖片。
php代碼
function convert_data($data){
$image = base64_decode( str_replace('data:image/jpeg;base64,', '',$data);
save_to_file($image);
}
function save_to_file($image){
$fp = fopen($filename, 'w');
fwrite($fp, $image); fclose($fp);
}
請注意，以上的解決方案不僅能用于Web App拍照上傳，并且你可以實現(xiàn)把Canvas的輸出轉換為圖片上傳的功能。這樣你可以使用Canvas為用戶提供圖片編輯，例如裁剪、上色、涂鴉的畫板功能，然后把用戶編輯完的圖片保存到服務器上。
FileReader 對象FileReader 對象主要用來把文件讀入內(nèi)存，并且讀取文件中的數(shù)據(jù)。通過構造函數(shù)創(chuàng)建一個 FileReader 對象。
這個文件讀取對象有以下幾種方法：
1.readAsText():讀取文本文件(可以使用Txt打開的文件)，返回文本字符串，默認編碼是UTF-8。
2.readAsBinaryString():讀取任意類型的文件。返回二進制字符串。這個方法不是用來讀取文件展示給用戶看，而是存儲文件。例如：讀取文件的內(nèi)容，獲取二進制數(shù)據(jù)，傳遞給后臺，后臺接收了數(shù)據(jù)之后，再將數(shù)據(jù)存儲。
3.readAsDataURL():讀取文件獲取一段以data開頭的字符串，這段字符串的本質就是DataURL.DataURL是一種將文件(這個文件一般就是指圖像或者能夠嵌入到文檔的文件格式)嵌入到文檔的方案。DataURL是將資源轉換為base64編碼的字符串形式，并且將這些內(nèi)容直接存儲在url中優(yōu)化網(wǎng)站的加載速度和執(zhí)行效率。
4.abort():中斷讀取
該對象常見應用在即時預覽：
即時：當用戶選擇完圖片之后就立刻進行預覽的處理 onchange
預覽：通過文件讀取對象的readAsDataURL()完成。
其中獲取數(shù)據(jù)時，F(xiàn)ileReader還提供一個完整的事件模型，用來捕獲讀取文件時的狀態(tài)。
onabort:讀取文件中斷片時觸發(fā)
onerror:讀取錯誤時觸發(fā)
onload:文件讀取成功完成時觸發(fā)
onloadend:讀取完成時觸發(fā)，無論成功還是失敗
onloadstart:開始讀取時觸發(fā)
onprogress:讀取文件過程中持續(xù)觸發(fā) （BY三人行慕課）
img src="data:image/png;base64,圖片base64編碼"/
前端顯示的時候這樣顯示就好了
至于后臺接收，這個編碼就是一個字符串，用String 接收就好了
重慶分公司
重慶分公司
