A. html5+js實現二維碼掃描的代碼

通過下面的代碼即可實現:

HBuilder就有調用原生硬體的介面html5++

<!DOCTYPEhtml>

<html>

<head>

<metacharset="utf-8">

<title>CameraExample</title>

<scripttype="text/javascript">

//擴展API載入完畢後調用onPlusReady回調函數

document.addEventListener("plusready",onPlusReady,false);

varr=null;

//擴展API載入完畢,現在可以正常調用擴展API

functiononPlusReady(){

//獲取設備默認的攝像頭對象

varcmr=plus.camera.getCamera();

B. html5和js如何判斷二維碼是否掃碼

這個怎麼判斷?沒後台光靠頁面根本無法判斷。你根本就不可能知道用戶是不是掃碼,本來手機掃碼的行為就和頁面無關,頁面的數據變化要麼是來源於後台,要麼是用戶進行了操作。

C. html5怎麼掃描二維碼

  1. 掃描二維碼的話,取決於手機攝像頭。

  2. Html5文件的話,你需要將製作好的二維碼圖片放在Html5內容裡面。

  3. 將建好的網址加在微信公眾號,或者是QQ公眾的導航上面,或者是網站裡面。

  4. 當點擊進入頁面之後,會看到二維碼圖片。

  5. 用手機按壓圖片,APP會提示掃描圖片中的二維碼?

  6. 點擊確定掃描二維碼即可。

注釋:圖片盡量做成像下圖一樣的,增強二維碼的趣味性,吸引其他人掃描。

D. 自己寫的html頁面怎麼加入掃描二維碼功能

我這里用jq來寫,如果你也要使用這種方法的話就要使用jq的插件來支持;

<scripttype="text/javascript"src="jquery-1.9.1.js"></script><!--jq的插件-->
<scripttype="text/javascript"src="jquery.min.js"></script><!--jq的插件-->

<button>點擊</button>
<imgsrc="ewm.png"class="imgewm"/>


$(".imgewm").hide();//這里的意思是瀏覽器一打開執行這里,把二維碼的這張圖片先隱藏
$("button").click(function(){
$(".imgewm").show();//當點擊button的時候把隱藏的二維碼給顯示出來
});
});
</script>

E. 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>

F. 我想做一個html5的網頁,在網頁中可以掃描二維碼。(不是安卓,也不是ios)

可以直接使用Google提供的網址二維碼API,
具體使用方法,參考Chrome瀏覽器小樂圖客擴展的一鍵生成網址二維碼功能

G. html5怎麼做掃描二維碼的功能

1.解決的問題:
1.能夠在微博客戶端呼起攝像頭掃描二維碼並且解析;
2.能夠在原版生瀏覽器和微信客戶權端中掃描二維碼並且解析;
2.優點:
web端或者是 h5端可以直接完成掃碼的工作;
3.缺點:
圖片不清晰很容易解析失敗(拍照掃描圖片需要鏡頭離二維碼的距離很近),相對於 native 呼起的攝像頭解析會有1-2秒的延時。
說明:
此插件需要配合zepto.js 或者 jQuery.js使用
使用方法:
1.在需要使用的頁面按照下面順序引入lib目錄下的 js 文件

復制代碼
代碼如下:

<script src="lib/zepto.js"></script>
<script src="lib/qrcode.lib.min.js"></script>
<script src="lib/qrcode.js"></script>

H. 用HTML5 可以實現二維碼掃描識別的功能嗎

可以。
實現基本步驟:
操作攝像頭,獲取圖片。
技術要點:MediaStream、GetUserMedia、File api。
利用canvas使用相關演算法分析圖片識別圖片得出結果。
技術要點:getImageData
* 涉及到的技術點瀏覽器們(包括移動端)支持各異,現階段要開發並投產還不太現實
* 識別演算法是一個難點,不過謝謝github,謝謝開源社區,@Shou Jiesong 的答案中有phonegap的插件地址,支持各種碼。

I. 關於HTML的二維碼掃描功能

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Barcode Example</title>
<script type="text/javascript" >
// 擴展API載入完畢後調用onPlusReady回調函數
document.addEventListener( "plusready", onPlusReady, false );
// 擴展API載入完畢,現在可以正常調用擴展API
function onPlusReady() {
var e = document.getElementById("scan");
e.removeAttribute( "disabled" );
}
// 從圖片中掃描
function scanImg() {
plus.barcode.scan( '_www/barcode.png', function (type,result) {
alert( "Scan success:("+type+")"+result );
}, function (error) {
alert( error.message );
} );
}
</script>
<style type="text/css">
*{
-webkit-user-select: none;
}
html,body{
margin: 0px;
padding: 0px;
height: 100%;
}
</style>
</head>
<body >
<input id="scan" type='button' disabled="disabled" onclick='scanImg()' value='掃描圖片'></input>
</body>
</html>

我沒有試過 你自己看看

J. html5+js實現二維碼掃描

通過下面的代碼即可實現:

HBuilder就有調用原生硬體的介面html5++

<!DOCTYPEhtml>

<html>

<head>

<metacharset="utf-8">

<title>CameraExample</title>

<scripttype="text/javascript">

//擴展內API載入完畢後調用onPlusReady回調函數

document.addEventListener("plusready",onPlusReady,false);

varr=null;

//擴展API載入完畢,現容在可以正常調用擴展API

functiononPlusReady(){

//獲取設備默認的攝像頭對象

varcmr=plus.camera.getCamera();