html5手機上傳圖片
Ⅰ HTML5 做的移動 web app 怎樣實現從本地上傳圖片
當然可以,不過只能從相冊里傳
Ⅱ Html5移動端上傳圖片並裁剪 - Clipic.js
Clipic.js插件可以為移動端 (僅支持移動端) 提供頭像上傳並裁剪成指定尺寸,用原生js開發的,輕量級,包含html跟css,不到8kb。點此鏈接體驗: https://teojs.github.io/clipic/
https://github.com/teojs/clipic
參數說明
width:Number (默認:500) – 裁剪寬度
height:Number (默認:500) – 裁剪高度
ratio:Number (可選) – 裁剪的比例,當傳入ratio時width/height將無效
src:String (必傳) – 需要裁剪的圖片,可以是圖片鏈接,或者 base64
type:String (默認:jpeg) – 裁剪後圖片的類型,僅支持 jpeg/png 兩種
quality:Number (默認:0.9) – 壓縮質量
buttonText:Array (默認:[『取消』, 『重置』, 『完成』]) – 底部三個按鈕文本
http://bbs.itying.com/topic/5cb17892c6a71b10bcef96b0
Ⅲ 如何使用HTML5實現利用攝像頭拍照上傳功能
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是回調函數,當然你也可以直接在此寫一個匿名函數
}
function success(stream){
video_element.src=stream;
}
</script>
此時,video 標簽內將顯示動態的攝像視頻流。下面需要進行拍照了。
2、 拍照
拍照是採用HTML5的Canvas功能,實時捕獲Video標簽的內容,因為Video元素可以作為Canvas圖像的輸入,所以這一點很好實現。主要代碼如下:
var canvas=document.createElement(『canvas』); //動態創建畫布對象
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對象內指定的區域捕捉繪制到畫布上指定的區域,可進行不等大不等位的繪制。
document.body.append(canvas);
3、 圖片獲取
從Canvas獲取圖片數據的核心思路是用canvas的toDataURL將Canvas的數據轉換為base64位編碼的PNG圖像,類似於「data:image/png;base64,xxxxx」的格式。
var imgData=canvas.toDataURL(「image/png」);
這樣,imgData變數就存儲了一長串的字元數據內容,表示的就是一個PNG圖像的base64編碼。因為真正的圖像數據是base64編碼逗號之後的部分,所以要讓實際伺服器接收的圖像數據應該是這部分,我們可以用兩種辦法來獲取。
第一種:是在前端截取22位以後的字元串作為圖像數據,例如:
var data=imgData.substr(22);
如果要在上傳前獲取圖片的大小,可以使用:
var length=atob(data).length; //atob 可解碼用base-64解碼的字串
第二種:是在後端獲取傳輸的數據後用後台語言截取22位以後的字元串(也就是在前台略過上面這步直接上傳)。例如php里:
$image=base64_decode(str_replace(『data:image/jpeg;base64,』,」,$data);
4、 圖片上傳
在前端可以使用Ajax將上面獲得的圖片數據上傳到後台腳本。例如使用jQuery時可以用:
$.post(『upload.php』,{『data』:data});
在後台我們用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拍照上傳,也可以通過Canvas的編輯功能函數提供圖片編輯,例如裁剪、上色、塗鴉、圈點等功能,然後把用戶編輯完的圖片上傳保存到伺服器上。
在還在不斷補充修正的HTML5的驅動下,Web App與Native App之間的距離將越來越小。在可預見的不遠的未來,越來越多老的和新的開發項目必將會遷移到WEB應用上來。
相關規范:
(為便於閱讀,對原文進行了不失原意的適當修改,包括代碼中一些錯誤的重復,並作了注釋)
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是回調函數,當然你也可以直接在此寫一個匿名函數
}
function success(stream){
video_element.src=stream;
}
</script>
此時,video 標簽內將顯示動態的攝像視頻流。下面需要進行拍照了。
2、 拍照
拍照是採用HTML5的Canvas功能,實時捕獲Video標簽的內容,因為Video元素可以作為Canvas圖像的輸入,所以這一點很好實現。主要代碼如下:
var canvas=document.createElement(『canvas』); //動態創建畫布對象
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對象內指定的區域捕捉繪制到畫布上指定的區域,可進行不等大不等位的繪制。
document.body.append(canvas);
3、 圖片獲取
從Canvas獲取圖片數據的核心思路是用canvas的toDataURL將Canvas的數據轉換為base64位編碼的PNG圖像,類似於「data:image/png;base64,xxxxx」的格式。
var imgData=canvas.toDataURL(「image/png」);
這樣,imgData變數就存儲了一長串的字元數據內容,表示的就是一個PNG圖像的base64編碼。因為真正的圖像數據是base64編碼逗號之後的部分,所以要讓實際伺服器接收的圖像數據應該是這部分,我們可以用兩種辦法來獲取。
第一種:是在前端截取22位以後的字元串作為圖像數據,例如:
var data=imgData.substr(22);
如果要在上傳前獲取圖片的大小,可以使用:
var length=atob(data).length; //atob 可解碼用base-64解碼的字串
第二種:是在後端獲取傳輸的數據後用後台語言截取22位以後的字元串(也就是在前台略過上面這步直接上傳)。例如PHP里:
$image=base64_decode(str_replace(『data:image/jpeg;base64,』,」,$data);
4、 圖片上傳
在前端可以使用Ajax將上面獲得的圖片數據上傳到後台腳本。例如使用jQuery時可以用:
$.post(『upload.php』,{『data』:data});
在後台我們用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拍照上傳,也可以通過Canvas的編輯功能函數提供圖片編輯,例如裁剪、上色、塗鴉、圈點等功能,然後把用戶編輯完的圖片上傳保存到伺服器上。
在還在不斷補充修正的HTML5的驅動下,Web App與Native App之間的距離將越來越小。在可預見的不遠的未來,越來越多老的和新的開發項目必將會遷移到WEB應用上來。
Ⅳ 怎麼用html5或js調用手機的攝像頭拍照上傳以及調用
h5不能直接調用攝像頭,只能用<input type="file" />上傳圖片來間接調用攝像頭
Ⅳ html5 如何調用手機相冊,進行上傳照片
cordova
用代碼調用硬體,這裡面有個方法可以調用手機的攝像頭,裡面我記得還有個功能查看手機相冊
Ⅵ 怎麼用html5或js調用手機的攝像頭拍照上傳以及調用手機相冊選取照片
1、實現頭部的方法代碼。
注意事項:
JavaScript是一種屬於網路的腳本語言,已經被廣泛用於Web應用開發,常用來為網頁添加各式各樣的動態功能,為用戶提供更流暢美觀的瀏覽效果。通常JavaScript腳本是通過嵌入在HTML中來實現自身的功能的。
Ⅶ 把HTML5的手機網站嵌入安卓APP中,發現<input type='file' />的上傳按鈕功能失效,點擊沒有任何反應
安卓APP的WebView默認屏蔽了該控制項的使用,有些安卓APP之所以能支持文件選擇和上傳,主要可能是有可能採取了如下措施之一:
(1)可能在該APP中重寫了相關方法(http://stackoverflow.com/questions/5907369/file-upload-in-webview)
(2)提供了JS Bridge來供web頁面調用
所以,單從前端技術上是解決不了這個問題的。
這個問題之所以不太好排查,一方面跟手機端的圖片上傳功能我不太常用到有很大關系,另一方面也因為見到一些其它的APP容器能支持該功能,所以思維在習慣上已經形成定勢,誤以為這是WebView默認就支持的。
末了,順便提醒一句,下次進行類似功能的需求評審,別忘了先了解下相應的APP容器是否支持該功能,如果沒有,則需要找到相應的客戶端開發同學評估一下工時,以免造成影響項目進度的風險
Ⅷ HTML5上傳圖片,安卓手機調用相冊 提示錯誤,求教!
好像格式不正確
Ⅸ 怎麼用JS解決html5小米手機上傳圖片路徑為空
上傳是到伺服器,js是前端