❶ vue 做 h5 怎麼實現 掃碼功能調用手機相機掃碼
這個和vue沒關系
<input type="file" accept="image/*" capture="camera">
在頁面導入二維碼解析庫,用相機識別二維碼,再用庫進行識別
兼容性不好
❷ html5移動端調用手機相冊和相機
需要載入cordova.js
方法:
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
pictureSource = navigator.camera.PictureSourceType;
destinationType = navigator.camera.DestinationType;
}
//相冊
function fromCamera()
{
var source = pictureSource.PHOTOLIBRARY;
navigator.camera.getPicture(function (imageData) {
setimg(imageData);
}, function (message) {
if (source == pictureSource.CAMERA)
alert('載入照相機出錯!' + message);
else
alert('載入相冊出錯!' + message);
}, {
quality: 50,
destinationType: destinationType.FILE_URI,
sourceType: source
});
}
//拍照
function EditImgPz()
{
navigator.camera.getPicture(function (imageData) {
setimg(imageData);
}, function (message) {
alert(message);
}, {
quality: 50,
destinationType: navigator.camera.DestinationType.FILE_URI,
sourceType: Camera.PictureSourceType.CAMERA,
allowEdit: true,
encodingType: Camera.EncodingType.JPEG,
popoverOptions: CameraPopoverOptions,
saveToPhotoAlbum: true
});
}
❸ html5移動端頁面上調用手機攝像頭掃描二維碼並獲取二維碼信息代碼
html5移動端調用手機攝像頭掃描二維碼並獲取二維碼信息代碼如下:
[html]view plain
<!DOCTYPEhtml>
<html><head>
<title>HTML5codeReader</title>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">
</head>
<styletype="text/css">
html,body{height:100%;width:100%;text-align:center;}
</style>
<scriptsrc="jquery-1.9.1.js"></script>
<script>
//這段代主要是獲取攝像頭的視頻流並顯示在Video簽中
varcanvas=null,context=null,video=null;
window.addEventListener("DOMContentLoaded",function()
{
try{
canvas=document.getElementById("canvas");
context=canvas.getContext("2d");
video=document.getElementById("video");
varvideoObj={"video":true,audio:false},
flag=true,
MediaErr=function(error)
{
flag=false;
if(error.PERMISSION_DENIED)
{
alert('用戶拒絕了瀏覽器請求媒體的許可權','提示');
}elseif(error.NOT_SUPPORTED_ERROR){
alert('對不起,您的瀏覽器不支持拍照功能,請使用其他瀏覽器','提示');
}elseif(error.MANDATORY_UNSATISFIED_ERROR){
alert('指定的媒體類型未接收到媒體流','提示');
}else{
alert('系統未能獲取到攝像頭,請確保攝像頭已正確安裝。或嘗試刷新頁面,重試','提示');
}
};
//獲取媒體的兼容代碼,目前只支持(Firefox,Chrome,Opera)
if(navigator.getUserMedia)
{
//qq瀏覽器不支持
if(navigator.userAgent.indexOf('MQQBrowser')>-1){
alert('對不起,您的瀏覽器不支持拍照功能,請使用其他瀏覽器','提示');
returnfalse;
}
navigator.getUserMedia(videoObj,function(stream){
video.src=stream;
video.play();
},MediaErr);
}
elseif(navigator.webkitGetUserMedia)
{
navigator.webkitGetUserMedia(videoObj,function(stream)
{
video.src=window.webkitURL.createObjectURL(stream);
video.play();
},MediaErr);
}
elseif(navigator.mozGetUserMedia)
{
navigator.mozGetUserMedia(videoObj,function(stream){
video.src=window.URL.createObjectURL(stream);
video.play();
},MediaErr);
}
elseif(navigator.msGetUserMedia)
{
navigator.msGetUserMedia(videoObj,function(stream){
$(document).scrollTop($(window).height());
video.src=window.URL.createObjectURL(stream);
video.play();
},MediaErr);
}else{
alert('對不起,您的瀏覽器不支持拍照功能,請使用其他瀏覽器');
returnfalse;
}
if(flag){
alert('為了獲得更准確的測試結果,請盡量將二維碼置於框中,然後進行拍攝、掃描。請確保瀏覽器有許可權使用攝像功能');
}
//這個是拍照按鈕的事件,
$("#snap").click(function(){startPat();}).show();
}catch(e){
printHtml("瀏覽器不支持HTML5CANVAS");
}
},false);
//列印內容到頁面
functionprintHtml(content){
$(window.document.body).append(content+"<br/>");
}
//開始拍照
functionstartPat(){
setTimeout(function(){//防止調用過快
if(context)
{
context.drawImage(video,0,0,320,320);
CatchCode();
}
},200);
}
//抓屏獲取圖像流,並上傳到伺服器
functionCatchCode(){
if(canvas!=null)
{
//以下開始編數據
varimgData=canvas.toDataURL();
//將圖像轉換為base64數據
varbase64Data=imgData;//.substr(22);//在前端截取22位之後的字元串作為圖像數據
//開始非同步上
$.post("saveimg.php",{"img":base64Data},function(result)
{
printHtml("解析結果:"+result.data);
if(result.status=="success"&&result.data!="")
{
printHtml("解析結果成功!");
}else{
startPat();//如果沒有解析出來則重新抓拍解析
}
},"json");
}
}
</script>
<body>
<divid="support"></div>
<divid="contentHolder">
<videoid="video"width="320"height="320"autoplay>
</video>
<canvasstyle="display:none;background-color:#F00;"id="canvas"width="320"height="320">
</canvas><br/>
<buttonid="snap"style="display:none;height:50px;width:120px;">開始掃描</button>
</div>
</body></html>
❹ html5怎樣調用手機攝像頭或者相冊
只需要在Html5代碼中加入下列代碼就可以調用手機攝像頭或者相冊。
<input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">
<input type="file" accept="image/*;capture=camera">輸入此行代碼可以調用相機。
<input type="file" accept="image/*" />選擇此行代碼刻意選擇調用相機,圖片或者相冊。
(4)androidh5調用相機擴展閱讀:
一個網頁對應多個HTML文件,超文本標記語言文件以.htm(磁碟操作系統DOS限制的外語縮寫)為擴展名或.html(外語縮寫)為擴展名。可以使用任何能夠生成TXT類型源文件的文本編輯器來產生超文本標記語言文件,只用修改文件後綴即可。
標準的超文本標記語言文件都具有一個基本的整體結構,標記一般都是成對出現(部分標記除外例如:<br/>),即超文本標記語言文件的開頭與結尾標志和超文本標記語言的頭部與實體兩大部分。有三個雙標記符用於頁面整體結構的確認。
標記符<html>,說明該文件是用超文本標記語言(本標簽的中文全稱)來描述的,它是文件的開頭;而</html>,則表示該文件的結尾,它們是超文本標記語言文件的開始標記和結尾標記。
頭部內容
標記符< html>:說明該文件是用超文本標記語言來描述的,它是文件的開頭,而</html>則表示該文件的結尾,它們是超文本標記語言文件的開始標記和結尾標記。
<head></head>:這2個標記符分別表示頭部信息的開始和結尾。頭部中包含的標記是頁面的標題、序言、說明等內容,它本身不作為內容來顯示,但影響網頁顯示的效果。
頭部中最常用的標記符是標題標記符和meta標記符,其中標題標記符用於定義網頁的標題,它的內容顯示在網頁窗口的標題欄中,網頁標題可被瀏覽器用做書簽和收藏清單。
❺ H5 調用手機相機拍照時 怎麼設置相機拍照時的樣式
需要載入cordova.js方法:document.addEventListener("deviceready",onDeviceReady,false);functiononDeviceReady(){pictureSource=navigator.camera.PictureSourceType;destinationType=navigator.camera.DestinationType;}//相
❻ h5能否實現調用攝像頭捕抓眨眼動作自動拍照
目前而言h5是沒法實現的。
你說的調用攝像頭捕捉眨眼應該是類似美顏相機那樣,能夠直接實時識別用戶臉部的效果。
h5,目前是沒法做到的,技術上還達不到。
只能通過上傳照片進行識別。
app是可以的。
❼ html5或者JS怎樣調用手機攝像頭或者相冊
你給的網頁用的是 <input accept="image/*" type="file">,在IOS端點擊時會提示選擇圖片或相機,安卓端要看瀏覽器對這兩個屬性的優化,部分瀏覽器會直接跳轉到資源管理器,優化做得好的可以直接提示選擇相冊或相機。
❽ 移動端H5網頁能不能調取攝像頭
直接調用相機調用相機圖片或者相冊還是要根據手機的類型來說,有些手機只能調相機,有些手機只能調相冊,或者兩者都行。以上,希望能幫助到你。
❾ 怎麼用html5或js調用手機的攝像頭拍照上傳以及調用手機相冊選取照片
1、實現頭的方法代碼。
注意事項:
JavaScript是一種網路腳本語言,在web應用開發中得到了廣泛的應用,它經常被用來為網頁添加各種動態功能,為用戶提供更加流暢美觀的瀏覽效果,通常JavaScript腳本被嵌入到HTML中來實現自己的功能。