Ⅰ 前端使用input選擇圖片（多張）僅提供思路
1.首先前端用input調用android相冊，不能選擇多張圖，需要Android原生調用選擇圖片界面（非系統相冊），可以選擇PictureSelector框架。
在build.gradle中引入
// glide載入圖片
implementation 'com.github.LuckSiege.PictureSelector:picture_library:v2.2.3'
//glide版本慎用，高版本會導致閃退，具體參考github上的文件
implementation'com.github.bumptech.glide:glide:4.5.0'
2.在叢則webview中使用（可以直接調用相機setselectorPhoto）
3.選擇照帆鄭冊片後得到數據
4.最後轉化uri數組給前端（方法直接復制）
/*2.得到文件地址傳遞態宏前端*/
@SuppressWarnings("null")
@TargetApi(Build.VERSION_CODES.LOLLIPOP)
private void onActivityResultAboveL(int requestCode,int resultCode, Intent data) {
if (requestCode != PictureConfig.CHOOSE_REQUEST
||mUploadCallbackAboveL ==null) {
return;
}
Uri[] results =null;
Uri uriData =null;
ArrayList uridatas =new ArrayList<>();
if (resultCode == Activity.RESULT_OK) {
if (data ==null) {
results =new Uri[]{imageUri};
}else {
// 3。得到文件地址集合
selectList = PictureSelector.obtainMultipleResult(data);
// 4。遍歷轉化uri，添加到uri集合
for (int i =0; i
uriData = Uri.fromFile(new File(selectList.get(i).getPath()));
uridatas.add(i, uriData);
}
// 5.uri集合轉數組
results = (Uri[]) uridatas.toArray(new Uri[selectList.size()]);
}
if (results !=null) {
// 6.上傳前端
mUploadCallbackAboveL.onReceiveValue(results);
mUploadCallbackAboveL =null;
}else {
results =new Uri[]{imageUri};
mUploadCallbackAboveL.onReceiveValue(results);
mUploadCallbackAboveL =null;
}
}else {
mUploadCallbackAboveL.onReceiveValue(null);
}
mUploadCallbackAboveL =null;
}
Ⅱ html5或者JS怎樣調用手機攝像頭或者相冊
你給的網頁用的是 <input accept="image/*" type="file">，在IOS端點擊時會提示選擇圖片或相機，安卓端要看瀏覽器對這兩個屬性的優化，部分瀏覽器會直接跳轉到資源管理器，優化做得好的可以直接提示選擇相冊或相機。
Ⅲ 前端 h5手機端視頻錄制
ios系統要使用input 調用本地攝像，下面是調起錄像的。
<input type="file" name="video" id="video-input" accept="video#zs#" capture="user" onchange="videoChange()" />
Ⅳ 前端開發遇到的問題與怎麼解決的
最終解決方法：願化蝶飛向，註定是錯覺，前端開發遇題與解決只是，不要高估情的美。，對方留下各種各樣的印記。中間的小邪送出了。對每個人微笑。
Ⅳ H5前端調用攝像頭拍照
就需求本身而言，若是交給Native同事去蔽野開發，就是一個自定義相機的功能。可能要看怎麼阻止系統拍攝照片後不進手機系統相冊。
對於此需求若是前端來實現的話，也可以實現。大概就是調起攝像頭後，獲取當前畫面，然後截取當前幀的畫面，轉換成圖片保存。基本步驟如下：
【 思路問題不大，但是實際這樣開發時，還會有以下幾個問題： 】
1. 交互神禪體驗不好
window.navigator.mediaDevices.getUserMedia瀏覽器BOM api時，需要用戶手動點擊確認，允許打開攝像頭。游並塵交互體驗不太好。
2. 畫面畫質問題
前端實現本質上和截圖差不多，畫面質量沒有原生拍照效果好。
3. 瀏覽器API mediaDevices為undefined問題
window.navigator.mediaDevices在非以下三種情況下時，會為undefined，所以當為非https的域或者非本地localhost域，則都無法使用。
a. localhost 域
b. 開啟了 HTTPS 的域
c. 使用 file:/// 協議打開的本地文件
【若想在http下也可使用，怎麼辦？？？】
通過設置chrome瀏覽器，開啟相應flag可以實現。
a.. chrome瀏覽器輸入 chrome://flags/#unsafely-treat-insecure-origin-as-secure
b. 將該 flag 切換成 enable 狀態
c. 輸入框中填寫需要開啟的域名，譬如example.com，多個以逗號分隔
Ⅵ html5怎樣調用手機攝像頭或者相冊
用input type=file capture=camcorder調用攝像頭，會先讓你選擇拍照或者從相冊選取。
首先實現在瀏覽器中調用手機攝像頭，實現拍照功能並且把拍下的照片顯示在頁面並上傳到伺服器上，然後再在伺服器端進行分析。
首先實現在瀏覽器中調用攝像頭，當然用現在火的不行的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瀏覽器也是不支持的。
想了解更多關於html5調用手機攝像頭的內容可以點擊http://dev.w3.org/2011/webrtc/editor/getusermedia.html。
圖片的獲取：
下面我們要從Canvas獲取圖片數據，其核心思路是用canvas的toDataURL將Canvas的數據轉換為base64位編碼的PNG圖像，類似於「data:image/png;base64,xxxxx」的格式。
Html代碼
var imgData =canvas.toDataURL("image/png");
因為真正圖像數據是base64編碼逗號之後的部分，所以我們實際伺服器處理的圖像數據應該是這部分，我們可以用兩種辦法來獲取。
第一種：是在前端截取22位以後的字元串作為圖像數據，例如：
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
第二種：是在後端獲取傳輸的數據後用後台語言截取22位以後的字元串。例如PHP里
php代碼:
$image = base64_decode( str_replace('data:image/jpeg;base64,', '',$data);
圖片上傳：
在前端可以使用Ajax將上面獲得的圖片數據上傳到後台腳本。例如使用jQuery時：
js代碼
$.post('upload.php',{ 'data' : data } );
在後台我們用PHP腳本接收數據並存儲為圖片。
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的輸出轉換為圖片上傳的功能。這樣你可以使用Canvas為用戶提供圖片編輯，例如裁剪、上色、塗鴉的畫板功能，然後把用戶編輯完的圖片保存到伺服器上。
Ⅶ 關於前端響應式的問題
@media響應式媒介尺寸，這個是我以前看到收藏的 你得知道自己特定設備的尺寸來對應相應的@media媒體查詢；望採納！！！！
一、定義斷點
手機的屏幕比較小，寬度通常在600像素以下；PC的屏幕寬度，一般都在1000像素以上（目前主流寬度是1366×768）設置相應的min-width和max-width值
所以響應式設計一般對600px下，1000px上針對各版本做@media細化。
主要的有：
1.第一個斷點群體就是針對於智能手機設置，他的寬度是小於480px(
2.第二個斷點是高智能移動設備，比如說Ipads設備，他的寬度是小於768px（
3.第三個斷點就是針對於大設備，比如說PC端，他的寬度是大於768px(>768px)
為了完美一些，我們還可以添加另外幾種斷點：
1.添加一個小於320px的斷點，針對於小型的移動設備；(
2.還可以添加適用於平板設備的斷點，大於768px小於1024px(>768px 和
3.最後還可以為超寬的桌面設置一個斷點，大於1024px(>1024px)
綜合下來，設置斷點把握三個要點：
1.滿足主要的斷點；
2.有可能的話添加一些別的斷點；
3.設置高於1024px的桌面斷點
PC端一般常用尺寸：
@mediascreenand(max-width:2059px){
ol.dribbbles{
max-width:1750px
}
}
@mediascreenand(max-width:1809px){
ol.dribbbles{
max-width:1500px
}
}
@mediascreenand(max-width:1559px){
ol.dribbbles{
max-width:1250px
}
}
@mediascreenand(max-width:1309px){
ol.dribbbles{
max-width:1000px
}
}
@mediascreenand(max-width:1059px){
ol.dribbbles{
max-width:750px
}
}
@mediascreenand(max-width:809px){
ol.dribbbles{
max-width:500px
}
}
@mediaonlyscreenand(max-width:870px){
}
@mediascreenand(max-width:520px){
}
/*各種手機的@media媒介*/
參考：http://www.bluesdream.com/blog/jquery-css-fixed-toolbar-compatible-ie6.html
@mediascreenand(max-height:475px){
}
/*此參數為iphone4的高度限制*/
@mediascreenand(max-height:480px)and(max-width:320px){
}
/*此參數為iphone4-iphone5的高度限制*/
@mediascreenand(min-height:481px)and(max-height:568px){
}
/*此參數為iphone5-iphone6的高度限制*/
@mediascreenand(min-height:480px)and(max-height:667px){
}
/*聯想的尺寸*/
@mediascreenand(min-height:668px)and(max-height:735px){
}
/*此參數為iphone6plus的高度*/
@mediascreenand(min-height:736px){
}
/*此參數為紅米Note判斷*/
@mediascreenand(min-height:737px){
}
或者適配iphone和ipad等設備
@mediascreenand(min-width:321px)and(max-width:375px){html{font-size:11px}}
@mediascreenand(min-width:376px)and(max-width:414px){html{font-size:12px}}
@mediascreenand(min-width:415px)and(max-width:639px){html{font-size:15px}}
@mediascreenand(min-width:640px)and(max-width:719px){html{font-size:20px}}
@mediascreenand(min-width:720px)and(max-width:749px){html{font-size:22.5px}}
@mediascreenand(min-width:750px)and(max-width:799px){html{font-size:23.5px}}
@mediascreenand(min-width:800px){html{font-size:25px}}