項目要求：
使用H5模仿微信掃一掃付款功能
經(jīng)過一系列的查找最后發(fā)現(xiàn)可以使用 JS調(diào)用手機攝像頭然后用畫布把當(dāng)前攝像頭的數(shù)據(jù)轉(zhuǎn)成Base64的png圖片，經(jīng)過QrCode直接再本地識別。
優(yōu)點：
兼容大多數(shù)瀏覽器
本地識別不占用服務(wù)端資源
代碼比較簡單只有一個頁面
<html lang="ZH-CN"><head> <meta charset="utf-8"> <title>Web QrCode Test</title><script type="text/javascript" src="jquery-1.8.3.min.js"></script> <script type="text/javascript" src="jsqrcode/src/grid.js"></script><script type="text/javascript" src="jsqrcode/src/version.js"></script><script type="text/javascript" src="jsqrcode/src/detector.js"></script><script type="text/javascript" src="jsqrcode/src/formatinf.js"></script><script type="text/javascript" src="jsqrcode/src/errorlevel.js"></script><script type="text/javascript" src="jsqrcode/src/bitmat.js"></script><script type="text/javascript" src="jsqrcode/src/datablock.js"></script><script type="text/javascript" src="jsqrcode/src/bmparser.js"></script><script type="text/javascript" src="jsqrcode/src/datamask.js"></script><script type="text/javascript" src="jsqrcode/src/rsdecoder.js"></script><script type="text/javascript" src="jsqrcode/src/gf256poly.js"></script><script type="text/javascript" src="jsqrcode/src/gf256.js"></script><script type="text/javascript" src="jsqrcode/src/decoder.js"></script><script type="text/javascript" src="jsqrcode/src/qrcode.js"></script><script type="text/javascript" src="jsqrcode/src/findpat.js"></script><script type="text/javascript" src="jsqrcode/src/alignpat.js"></script><script type="text/javascript" src="jsqrcode/src/databr.js"></script></head><body> <div class="booth"> <video id="video" width="400" height="400"></video> <canvas id='canvas' width='400' height='400'></canvas> <img id='img' src=''> </div> <div id="mmm"></div> <canvas id="qr-canvas" width="640" height="480"></canvas><script> //初始化媒體對象 var c=0; var video = document.getElementById('video'), canvas = document.getElementById('canvas'), img = document.getElementById('img'), vendorUrl = window.URL || window.webkitURL; //媒體對象 navigator.getMedia = navigator.getUserMedia || navagator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; navigator.getMedia({ video: true, //使用攝像頭對象 audio: false //不適用音頻 }, function(strem){ console.log(strem); video.src = vendorUrl.createObjectURL(strem); video.play(); }, function(error) { //error.code console.log(error); }); //啟動定時器 setTimeout("actionP(null)","1000"); //定時器 function actionP(data){ if(data==null){ Screenshot() }else{ if(data!=null & data!="error decoding QR Code"){//識別出數(shù)據(jù) if(data.indexOf("http")!=-1){ window.location.href=data; }else alert(data); }else{//沒有數(shù)據(jù)循環(huán)十次 c++; if(c<10){ setTimeout("actionP(null)","1000"); } } } } function Screenshot(){//截取圖像 canvas.getContext('2d').drawImage(video, 0, 0, 400, 400); var imgData = canvas.toDataURL("image/png"); load(imgData); img.src=imgData; } ////////////////////////////////////////識別二維碼//////////////////////////////////////////// function dragenter(e) { e.stopPropagation(); e.preventDefault(); } function dragover(e) { e.stopPropagation(); e.preventDefault(); } function drop(e) { e.stopPropagation(); e.preventDefault(); var dt = e.dataTransfer; var files = dt.files; } function load(name) { initCanvas(640,480); //識別二維碼并回調(diào)方法 qrcode.callback = actionP; qrcode.decode(name); } function initCanvas(ww,hh)//創(chuàng)建畫板 { gCanvas = document.getElementById("qr-canvas"); gCanvas.addEventListener("dragenter", dragenter, false); gCanvas.addEventListener("dragover", dragover, false); gCanvas.addEventListener("drop", drop, false); var w = ww; var h = hh; gCanvas.style.width = w + "px"; gCanvas.style.height = h + "px"; gCanvas.width = w; gCanvas.height = h; gCtx = gCanvas.getContext("2d"); gCtx.clearRect(0, 0, w, h); imageData = gCtx.getImageData( 0,0,320,240); } </script></body></html>以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
