html5二維碼
㈠ html5怎麼掃描二維碼
掃描二維碼的話，取決於手機攝像頭。
Html5文件的話，你需要將製作好的二維碼圖片放在Html5內容裡面。
將建好的網址加在微信公眾號，或者是QQ公眾的導航上面，或者是網站裡面。
當點擊進入頁面之後，會看到二維碼圖片。
用手機按壓圖片，APP會提示掃描圖片中的二維碼？
點擊確定掃描二維碼即可。
注釋：圖片盡量做成像下圖一樣的，增強二維碼的趣味性，吸引其他人掃描。
㈡ 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和js如何判斷二維碼是否掃碼
這個怎麼判斷？沒後台光靠頁面根本無法判斷。你根本就不可能知道用戶是不是掃碼，本來手機掃碼的行為就和頁面無關，頁面的數據變化要麼是來源於後台，要麼是用戶進行了操作。
㈣ html5移動端頁面上調用手機攝像頭掃描二維碼並獲取二維碼信息代碼
首先感謝 jsqrcode 的開發者，提供這么優秀的解析二維碼的代碼，為我減少了很大的工作量。jsqrcode 地址 網路
我的代碼庫地址網路
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>
2.自定義按鈕的 html 樣式
因為該插件需要使用<input type="file" /> ，該 html 結構在網頁上面是有固定的顯示樣式，為了能夠自定義按鈕樣式，我們可以按照下面的示例代碼結構嵌套代碼
復制代碼
代碼如下:
<div class="qr-btn" node-type="jsbridge">掃描二維碼1
<input node-type="jsbridge" type="file" name="myPhoto" value="掃描二維碼1" />
</div>
然後設置 input 按鈕的 css 隱藏按鈕，比如我使用的是屬性選擇器
復制代碼
代碼如下:
input[node-type=jsbridge]{
visibility: hidden;
}
這里我們只需要按照自己的需要定義class="qr-btn"的樣式即可。
3.在頁面上初始化 Qrcode 對象
復制代碼
代碼如下:
//初始化掃描二維碼按鈕，傳入自定義的 node-type 屬性
$(function() {
Qrcode.init($('[node-type=jsbridge]'));
});
主要代碼解析
復制代碼
代碼如下:
(function($) {
var Qrcode = function(tempBtn) {
//該對象只支持微博域下的解析，也就是說不是微博域下的頁面只能用第二種方案解析二維碼
if (window.WeiboJSBridge) {
$(tempBtn).on('click', this.weiBoBridge);
} else {
$(tempBtn).on('change', this.getImgFile);
}
};
Qrcode.prototype = {
weiBoBridge: function() {
WeiboJSBridge.invoke('scanQRCode', null, function(params) {
//得到掃碼的結果
location.href=params.result;
});
},
getImgFile: function() {
var _this_ = this;
var imgFile = $(this)[0].files;
var oFile = imgFile[0];
var oFReader = new FileReader();
var rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowmp)$/i;
if (imgFile.length === 0) {
return;
}
if (!rFilter.test(oFile.type)) {
alert("選擇正確的圖片格式!");
return;
}
//讀取圖片成功後執行的代碼
oFReader.onload = function(oFREvent) {
qrcode.decode(oFREvent.target.result);
qrcode.callback = function(data) {
//得到掃碼的結果
location.href = data;
};
};
oFReader.readAsDataURL(oFile);
},
destory: function() {
$(tempBtn).off('click');
}
};
//初始化
Qrcode.init = function(tempBtn) {
var _this_ = this;
var inputDom;
tempBtn.each(function() {
new _this_($(this));
});
$('[node-type=qr-btn]').on('click', function() {
$(this).find('[node-type=jsbridge]')[0].click();
});
};
window.Qrcode = Qrcode;
})(window.Zepto ? Zepto : jQuery);
㈤ 用HTML5 可以實現二維碼掃描識別的功能嗎
可以。
實現基本步驟：
操作攝像頭，獲取圖片。
技術要點：MediaStream、GetUserMedia、File api。
利用canvas使用相關演算法分析圖片識別圖片得出結果。
技術要點：getImageData
* 涉及到的技術點瀏覽器們（包括移動端）支持各異，現階段要開發並投產還不太現實
* 識別演算法是一個難點，不過謝謝github，謝謝開源社區，@Shou Jiesong 的答案中有phonegap的插件地址，支持各種碼。
㈥ 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>
㈦ 我想做一個html5的網頁，在網頁中可以掃描二維碼。（不是安卓，也不是ios）
可以直接使用Google提供的網址二維碼API，
具體使用方法，參考Chrome瀏覽器小樂圖客擴展的一鍵生成網址二維碼功能
㈧ 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();
㈨ 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();