h5呼叫相機、相簿、攝像頭拍照、錄影並壓縮預覽
阿新 • • 發佈:2018-12-16
1、使用h5中的input標籤
<!--相機--> <input id="fileBtn" type="file" onchange="upload('#fileBtn');" accept="image/*" capture='camera' style="opacity: 0;width:0;/>拍照 <!--攝像頭錄影--> <input id="video" type="file" accept="video/*" capture='camera' style="opacity: 0;width:0;"/>錄影 <!--呼叫相簿--> <input id="ph" type="file" onchange="upload('#ph');" accept="image/*" style="opacity: 0;width:0;"/>從相簿選擇 <!--圖片預覽,用於存放相機拍照或者相簿獲取的圖片--> <div class="photo"> <img src="" id="img1"/> <img src="" id="img2"/> <img src="" id="img3"/> </div> <!--存放視訊base64編碼--> <input type="hidden" id="vid" value=""><!--存放視訊base64編碼,用於傳給後臺上傳儲存-->
(1)、拍照 、獲取相簿圖片並預覽js
function upload(c){ var $c = document.querySelector(c), file = $c.files[0], reader = new FileReader(); //reader.readAsDataURL(file); // 縮放圖片需要的canvas var canvas = document.createElement('canvas'); var context = canvas.getContext('2d'); img = new Image(); img.onload = function() { // 圖片原始尺寸 var originWidth = this.width; var originHeight = this.height; // 最大尺寸限制,可通過國設定寬高來實現圖片壓縮程度 var maxWidth = 60, maxHeight = 60; // 目標尺寸 var targetWidth = originWidth, targetHeight = originHeight; if(originWidth > maxWidth || originHeight > maxHeight) { if(originWidth / originHeight > maxWidth / maxHeight) { // 更寬,按照寬度限定尺寸 targetWidth = maxWidth; targetHeight = Math.round(maxWidth * (originHeight / originWidth)); } else { targetHeight = maxHeight; targetWidth = Math.round(maxHeight * (originWidth / originHeight)); } } // canvas對圖片進行縮放 canvas.width = targetWidth; canvas.height = targetHeight; // 清除畫布 context.clearRect(0, 0, targetWidth, targetHeight); // 圖片壓縮 context.drawImage(img, 0, 0, targetWidth, targetHeight); /*第一個引數是建立的img物件;第二個引數是左上角座標,後面兩個是畫布區域寬高*/ //壓縮後的圖片base64 url /*canvas.toDataURL(mimeType, qualityArgument),mimeType 預設值是'image/jpeg'; * qualityArgument表示匯出的圖片質量,只要匯出為jpg和webp格式的時候此引數才有效果,預設值是0.92*/ var newUrl = canvas.toDataURL('image/jpeg', 0.1);//base64 格式,圖片質量 var img1 = $("#img1").attr("src"); var img2 = $("#img2").attr("src"); var img3 = $("#img3").attr("src"); if(img1 =="" || img1 == undefined){ $("#img1").attr("src",newUrl); }else if(img2 ==""){ $("#img2").attr("src",newUrl); } else if(img3 ==""){ $("#img3").attr("src",newUrl); } }; reader.onload = function(e) { img.src = e.target.result; }; reader.readAsDataURL(file); }
(1)、呼叫攝像頭錄影並預覽js
<!--錄影--> //視訊上傳 $("#video").change(function(){ $("#video0").remove();//每次呼叫的時候先刪除上一次建立的video標籤 $("#vid").val(""); //清空存放base64編碼的標籤(用於請求後臺上傳儲存) console.log(this.files[0].size); var fileSize =(this.files[0].size) / (1024*1024);//轉換成M fileSize = fileSize.toFixed(1);//保留小數點後一位 console.log(fileSize); if(fileSize > 30){ alert('上傳視訊不能大於30M'); }else{ var vde = '<video style="height:80px; width:78px;" id="video0" autoplay="autoplay" x5-playsinline="" playsinline="" webkit-playsinline=""></video>'; $(".photo").append(vde);//將建立的video標籤插入div(根據自己程式碼選擇要插入的div) var file = this.files[0]; var reader = new FileReader(); reader.onload = function(e) { $("#video0").attr("src", this.result);//將轉換後的編碼存入src完成預覽 var img=this.result; var imgNum = img.split(";base64,"); var imgBase=imgNum[1]; $("#vid").val(imgBase);//將轉換後的編碼儲存到input供後臺使用(請求後臺上傳儲存) }; reader.readAsDataURL(file);//呼叫自帶方法進行轉換 } }) ;