① 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>