缺點(diǎn)你無法直接驗(yàn)證傳來的base64數(shù)據(jù)的完整性，比如大小，文件頭之類的，還需要自己來實(shí)現(xiàn)。
專注于為中小企業(yè)提供網(wǎng)站制作、成都網(wǎng)站制作服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)定興免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了數(shù)千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。
HTML5技術(shù)支持WebApp在手機(jī)上拍照，顯示在頁面上并上傳到服務(wù)器。這是手機(jī)微博應(yīng)用中常見的功能，當(dāng)然你也可以在其它類型應(yīng)用中適當(dāng)使用此技術(shù)。
1、 視頻流
HTML5 的 The Media Capture（媒體捕捉） API 提供了對攝像頭的可編程訪問，用戶可以直接用 getUserMedia（請注意目前僅Chrome和Opera支持）獲得攝像頭提供的視頻流。我們需要做的是添加一個(gè)HTML5 的 Video 標(biāo)簽，并將從攝像頭獲得的視頻作為這個(gè)標(biāo)簽的輸入來源。
video id=”video” autoplay=”"/video
script
var video_element=document.getElementById(‘video’);
if(navigator.getUserMedia){ // opera應(yīng)使用opera.getUserMedianow
navigator.getUserMedia(‘video’,success,error); //success是回調(diào)函數(shù),當(dāng)然你也可以直接在此寫一個(gè)匿名函數(shù)
}
function success(stream){
video_element.src=stream;
}
/script
此時(shí)，video 標(biāo)簽內(nèi)將顯示動(dòng)態(tài)的攝像視頻流。下面需要進(jìn)行拍照了。
2、 拍照
拍照是采用HTML5的Canvas功能，實(shí)時(shí)捕獲Video標(biāo)簽的內(nèi)容，因?yàn)閂ideo元素可以作為Canvas圖像的輸入，所以這一點(diǎn)很好實(shí)現(xiàn)。主要代碼如下：
var canvas=document.createElement(‘canvas’); //動(dòng)態(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ū)域，可進(jìn)行不等大不等位的繪制。
document.body.append(canvas);
3、 圖片獲取
從Canvas獲取圖片數(shù)據(jù)的核心思路是用canvas的toDataURL將Canvas的數(shù)據(jù)轉(zhuǎn)換為base64位編碼的PNG圖像，類似于“data:image/png;base64,xxxxx”的格式。
var imgData=canvas.toDataURL(“image/png”);
這樣，imgData變量就存儲(chǔ)了一長串的字符數(shù)據(jù)內(nèi)容，表示的就是一個(gè)PNG圖像的base64編碼。因?yàn)檎嬲膱D像數(shù)據(jù)是base64編碼逗號之后的部分，所以要讓實(shí)際服務(wù)器接收的圖像數(shù)據(jù)應(yīng)該是這部分，我們可以用兩種辦法來獲取。
第一種：是在前端截取22位以后的字符串作為圖像數(shù)據(jù)，例如：
var data=imgData.substr(22);
如果要在上傳前獲取圖片的大小，可以使用：
var length=atob(data).length; //atob 可解碼用base-64解碼的字串
第二種：是在后端獲取傳輸?shù)臄?shù)據(jù)后用后臺(tái)語言截取22位以后的字符串（也就是在前臺(tái)略過上面這步直接上傳）。例如PHP里：
$image=base64_decode(str_replace(‘data:image/jpeg;base64,’,”,$data);
4、 圖片上傳
在前端可以使用Ajax將上面獲得的圖片數(shù)據(jù)上傳到后臺(tái)腳本。例如使用jQuery時(shí)可以用：
$.post(‘upload.php’,{‘data’:data});
在后臺(tái)我們用PHP腳本接收數(shù)據(jù)并存儲(chǔ)為圖片。
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ù)提供圖片編輯，例如裁剪、上色、涂鴉、圈點(diǎn)等功能，然后把用戶編輯完的圖片上傳保存到服務(wù)器上。
在還在不斷補(bǔ)充修正的HTML5的驅(qū)動(dòng)下，Web App與Native App之間的距離將越來越小。在可預(yù)見的不遠(yuǎn)的未來，越來越多老的和新的開發(fā)項(xiàng)目必將會(huì)遷移到WEB應(yīng)用上來。
相關(guān)規(guī)范：
（為便于閱讀，對原文進(jìn)行了不失原意的適當(dāng)修改，包括代碼中一些錯(cuò)誤的重復(fù)，并作了注釋）
HTML5技術(shù)支持WebApp在手機(jī)上拍照，顯示在頁面上并上傳到服務(wù)器。這是手機(jī)微博應(yīng)用中常見的功能，當(dāng)然你也可以在其它類型應(yīng)用中適當(dāng)使用此技術(shù)。
1、 視頻流
HTML5 的 The Media Capture（媒體捕捉） API 提供了對攝像頭的可編程訪問，用戶可以直接用 getUserMedia（請注意目前僅Chrome和Opera支持）獲得攝像頭提供的視頻流。我們需要做的是添加一個(gè)HTML5 的 Video 標(biāo)簽，并將從攝像頭獲得的視頻作為這個(gè)標(biāo)簽的輸入來源。
video id=”video” autoplay=”"/video
script
var video_element=document.getElementById(‘video’);
if(navigator.getUserMedia){ // opera應(yīng)使用opera.getUserMedianow
navigator.getUserMedia(‘video’,success,error); //success是回調(diào)函數(shù),當(dāng)然你也可以直接在此寫一個(gè)匿名函數(shù)
}
function success(stream){
video_element.src=stream;
}
/script
此時(shí)，video 標(biāo)簽內(nèi)將顯示動(dòng)態(tài)的攝像視頻流。下面需要進(jìn)行拍照了。
2、 拍照
拍照是采用HTML5的Canvas功能，實(shí)時(shí)捕獲Video標(biāo)簽的內(nèi)容，因?yàn)閂ideo元素可以作為Canvas圖像的輸入，所以這一點(diǎn)很好實(shí)現(xiàn)。主要代碼如下：
var canvas=document.createElement(‘canvas’); //動(dòng)態(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ū)域，可進(jìn)行不等大不等位的繪制。
document.body.append(canvas);
3、 圖片獲取
從Canvas獲取圖片數(shù)據(jù)的核心思路是用canvas的toDataURL將Canvas的數(shù)據(jù)轉(zhuǎn)換為base64位編碼的PNG圖像，類似于“data:image/png;base64,xxxxx”的格式。
var imgData=canvas.toDataURL(“image/png”);
這樣，imgData變量就存儲(chǔ)了一長串的字符數(shù)據(jù)內(nèi)容，表示的就是一個(gè)PNG圖像的base64編碼。因?yàn)檎嬲膱D像數(shù)據(jù)是base64編碼逗號之后的部分，所以要讓實(shí)際服務(wù)器接收的圖像數(shù)據(jù)應(yīng)該是這部分，我們可以用兩種辦法來獲取。
第一種：是在前端截取22位以后的字符串作為圖像數(shù)據(jù)，例如：
var data=imgData.substr(22);
如果要在上傳前獲取圖片的大小，可以使用：
var length=atob(data).length; //atob 可解碼用base-64解碼的字串
第二種：是在后端獲取傳輸?shù)臄?shù)據(jù)后用后臺(tái)語言截取22位以后的字符串（也就是在前臺(tái)略過上面這步直接上傳）。例如PHP里：
$image=base64_decode(str_replace(‘data:image/jpeg;base64,’,”,$data);
4、 圖片上傳
在前端可以使用Ajax將上面獲得的圖片數(shù)據(jù)上傳到后臺(tái)腳本。例如使用jQuery時(shí)可以用：
$.post(‘upload.php’,{‘data’:data});
在后臺(tái)我們用PHP腳本接收數(shù)據(jù)并存儲(chǔ)為圖片。
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ù)提供圖片編輯，例如裁剪、上色、涂鴉、圈點(diǎn)等功能，然后把用戶編輯完的圖片上傳保存到服務(wù)器上。
在還在不斷補(bǔ)充修正的HTML5的驅(qū)動(dòng)下，Web App與Native App之間的距離將越來越小。在可預(yù)見的不遠(yuǎn)的未來，越來越多老的和新的開發(fā)項(xiàng)目必將會(huì)遷移到WEB應(yīng)用上來。
可以使用html5，要將圖片轉(zhuǎn)換成base64需要使用到一個(gè)html5的接口FileReader.readAsDataURL()接口說明,這個(gè)接口可以將文件轉(zhuǎn)換成base64編碼格式，并且再以data：URL的形式展現(xiàn)出來
思路
1.創(chuàng)建三個(gè)html標(biāo)簽，input用來上傳圖片，textarea用來顯示base64代碼，因?yàn)閎ase64代碼內(nèi)容很多所以使用textarea標(biāo)簽，p標(biāo)簽用來顯示圖片。
2.使用js調(diào)用html5的FileReader.readAsDataURL()的API，聲明三個(gè)變量用于控制圖片上傳，base64代碼顯示以及圖片的顯示。
3.img_upload.addEventListener('change',readFile,false);添加一個(gè)監(jiān)聽事件，如果上傳文件發(fā)生變化就執(zhí)行readFile函數(shù)。
4.readFile函數(shù)的內(nèi)容就是調(diào)用接口，將圖片轉(zhuǎn)換成base64再輸出。
5.在執(zhí)行轉(zhuǎn)換和輸出之前先判斷一下上傳文件是不是圖片。
1）獲取視頻流
添加一個(gè)HTML5的Video標(biāo)簽，并將從攝像頭獲得視頻作為這個(gè)標(biāo)簽的輸入來源
var video = document.getElementByIdx_x_x("video");
navigator.getUserMedia({video:true}, function (stream) {
video.src = window.webkitURL.createObjectURL(stream);
}, function (error) { alert(error); });
2）拍照
關(guān)于拍照功能，采用HTML5的Canvas實(shí)時(shí)捕獲Video標(biāo)簽的內(nèi)容，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獲取圖片數(shù)據(jù)，其核心思路是用canvas的toDataURL將Canvas的數(shù)據(jù)轉(zhuǎn)換為base64位編碼的PNG圖像
var imgData=canvas.toDataURL(“image/png”);
imgData格式如下：”data:image/png;base64,xxxxx“
真正圖像數(shù)據(jù)是base64編碼逗號之后的部分
img src="data:image/png;base64,圖片base64編碼"/
前端顯示的時(shí)候這樣顯示就好了
至于后臺(tái)接收，這個(gè)編碼就是一個(gè)字符串，用String 接收就好了
FileReader 對象FileReader 對象主要用來把文件讀入內(nèi)存，并且讀取文件中的數(shù)據(jù)。通過構(gòu)造函數(shù)創(chuàng)建一個(gè) FileReader 對象。
這個(gè)文件讀取對象有以下幾種方法：
1.readAsText():讀取文本文件(可以使用Txt打開的文件)，返回文本字符串，默認(rèn)編碼是UTF-8。
2.readAsBinaryString():讀取任意類型的文件。返回二進(jìn)制字符串。這個(gè)方法不是用來讀取文件展示給用戶看，而是存儲(chǔ)文件。例如：讀取文件的內(nèi)容，獲取二進(jìn)制數(shù)據(jù)，傳遞給后臺(tái)，后臺(tái)接收了數(shù)據(jù)之后，再將數(shù)據(jù)存儲(chǔ)。
3.readAsDataURL():讀取文件獲取一段以data開頭的字符串，這段字符串的本質(zhì)就是DataURL.DataURL是一種將文件(這個(gè)文件一般就是指圖像或者能夠嵌入到文檔的文件格式)嵌入到文檔的方案。DataURL是將資源轉(zhuǎn)換為base64編碼的字符串形式，并且將這些內(nèi)容直接存儲(chǔ)在url中優(yōu)化網(wǎng)站的加載速度和執(zhí)行效率。
4.abort():中斷讀取
該對象常見應(yīng)用在即時(shí)預(yù)覽：
即時(shí)：當(dāng)用戶選擇完圖片之后就立刻進(jìn)行預(yù)覽的處理 onchange
預(yù)覽：通過文件讀取對象的readAsDataURL()完成。
其中獲取數(shù)據(jù)時(shí)，F(xiàn)ileReader還提供一個(gè)完整的事件模型，用來捕獲讀取文件時(shí)的狀態(tài)。
onabort:讀取文件中斷片時(shí)觸發(fā)
onerror:讀取錯(cuò)誤時(shí)觸發(fā)
onload:文件讀取成功完成時(shí)觸發(fā)
onloadend:讀取完成時(shí)觸發(fā)，無論成功還是失敗
onloadstart:開始讀取時(shí)觸發(fā)
onprogress:讀取文件過程中持續(xù)觸發(fā) （BY三人行慕課）
重慶分公司
重慶分公司
