① 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>
② jquery怎麼實現url地址生成二維碼
如果是一個固定的二亂肆維碼，我們只需要在網上找個地方生成圖片，然後放上圖片就可以了。但如果是地址不固定需要根據頁面來生成的話。就有兩種做法，一個是後端根據頁面做一個動態的二維碼。一種是前端使用插件生成。
本文要推薦的是一個jQuery二維碼插件，它可以根據你設定的地址來生成一個二維碼，二維碼可以有div格式的，也有Canvas格式的，canvas的支持自定義logo和文字在上面。
③ php代碼如何實現掃描二維碼獲取掃描者的信息
1、首先創建一個名稱為erweima的php文件。
注意事項：
用PHP做出的動態頁面與其他的編程語言相比，PHP是將程序嵌入到HTML文檔中去執行，執行效率比完全生成HTML標記的CGI要高許多；PHP還可以執行編譯後代碼，編譯可以達到加密和優化代碼運行，使代碼運行更快。
④ 如何讓生成的二維碼可以自動跳轉到網頁
需要藉助軟體來實現，以SmartVizor打碼軟體為例，可參考以下步驟:
1、將錄入網址等信息的數據源導入軟體中。
2、設置二維碼標簽的尺寸。
3、單擊繪制二維碼，按需繪制大小。
4、插入產品的掘液圖片或者單位的logo，也可自動可變圖片-綁定圖片的路徑、名字、格式即可。
5、將右邊網址數據拖拉入二維碼中，即可綁定可變網址。自動按需綁定每個商品的網址。
6、實際應用中為方便掃碼成功，需將圖片適當縮小，並設置二維爛灶碼的糾錯等級為高。點擊確判歷物認，設置即成功。
⑤ vue生成條形碼和二維碼
使用jsbarcode：
官網:
https://lindell.me/JsBarcode/
簡單使用如下：
vue用法：
1.npm install jsbarcode --save
2.在需要使用的vue頁面裡面引用：
import JsBarcode from 'jsbarcode'
3.界面中使用嘩缺：蘆蘆配陪指
<div style="text-align: center;" ><svg id="barcode" ></svg></div>
4.js：
詳細參數參考官方文檔。
使用qrcodejs2:
沒有找到官網，可以參考npmjs：
https://www.npmjs.com/package/qrcodejs2
vue用法：
1.npm install qrcodejs2 --save
2.在需要使用的頁面中引用：
import QRCode from 'qrcodejs2'
3.頁面:
<div style="display: flex;justify-content: center;" id='qrcode'></div>
4.js：
⑥ 前端如何把數據放到二維碼中
前端把數據放到二維碼中的步驟。
1、注冊一缺族友個賬戶登錄穗嫌操作後台。
2、點擊添加二維碼內容。
3、編輯二維碼里的內容，保存後就可以生成二維伏槐碼了。
4、在二維碼里編輯文字，上傳圖片，音頻，視頻，文檔等數據信息，別人掃碼後就能查看。
⑦ 前端支付二維碼判斷支付渠道
當消費者根據二維碼掃描時,聚合支付平台根據掃描者瀏覽器類型判斷支付類型。
微信支付和支付寶支付實現的流程都差不多，點擊支付按鈕調取支付介面，微信支付介面返回url而支付寶支付介面返回form表單，創建新節點提交就可以了，支付成功失敗的回調頁面是後台控制的。
支付寶支付對於前端來說比較簡單,只需要後端同志把要跳轉的頁面介面配置好,前端...//使用nextTick確保在彈框顯示前二維碼數據渲染,。
⑧ 前端怎麼實現生成內容為圖片的二維碼
<!DOCTYPE html> 2 <html> 3 <head> 4 <script charset='utf-8' type='text/javascript' src='./jquery.js'></script> 5 <script src="./jquery.qrcode.min.js" type="text/javascript"></script> 6 <script type="text/javascript"> 7 $(document).ready(function(){ 8 $('#qr_gen').click(function()
9 {10 $('#qr_container').qrcode({render:"canvas",height:120, width:120,correctLevel:0,text:$('#qr_link').val()});
11 });12 });13 </script>14 </head>15 <body>16 <h1>QR CODER</h1>17 <div>18 <label for="qr_link">URL:</label> 19 <input id="qr_link" type="text" value="I am going to be a quick response code." style="width:450px;" /> 20 <button id="qr_gen" value="Generate">Generate</button> <br />21 </div>22 <div id="qr_container" style="margin:auto; position:relative;"></div>23 </div>24 </body>25 </html>