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();