html5+js实现二维码扫描
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html5+js实现二维码扫描相关的知识，希望对你有一定的参考价值。
我想做一个网页，添加一个按钮，点击按钮就是二维码扫描。（不是安卓，也不是ios）想着网页版可以直接在安卓也ios里面的浏览器运行，二维码信息我希望通过c#获取和使用。求例子，最好是有源码。
或者调用微信二维码扫描的接口也行，具体实现方法和代码贴出来下。
通过下面的代码即可实现：
HBuilder就有调用原生硬件的接口html5++
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Camera Example</title>
<script type="text/javascript">
// 扩展API加载完毕后调用onPlusReady回调函数
document.addEventListener( "plusready", onPlusReady, false );
var r = null;
// 扩展API加载完毕，现在可以正常调用扩展API
function onPlusReady()
// 获取设备默认的摄像头对象
var cmr = plus.camera.getCamera();
1、代码：代码就是程序员用 开发工具所支持的语言写出来的 源文件，是一组由 字符、符号或信号 码元以离散形式表示信息的明确的规则体系。
2、html5：是指万维网的核心语言、 标准通用标记语言下的一个应用 超文本标记语言（ HTML）的第五次重大修改。2014年10月29日， 万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成。
参考技术A生成二维码支持中文
不是生成二维码，是扫描然后获取数据
参考技术B 亲，你这个问题解决了吗，我也遇到这个问题了 参考技术C 不用js用html就可以直接实现了<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Barcode Example</title>
<script type="text/javascript" >
// 扩展API加载完毕后调用onPlusReady回调函数
document.addEventListener( "plusready", onPlusReady, false );
// 扩展API加载完毕，现在可以正常调用扩展API
function onPlusReady()
var e = document.getElementById("scan");
e.removeAttribute( "disabled" );
// 从图片中扫描
function scanImg()
plus.barcode.scan( '_www/barcode.png', function (type,result)
alert( "Scan success:("+type+")"+result );
, function (error)
alert( error.message );
);
</script>
<style type="text/css">
*
-webkit-user-select: none;
html,body
margin: 0px;
padding: 0px;
height: 100%;
//你一去5 1 r g b。c o m看看
</style>//http://v.youku.com/v_show/id_XMTMzMTM0ODIzMg==.html </head>
<body >
<input id="scan" type='button' disabled="disabled" onclick='scanImg()' value='扫描图片'></input>
</body>//
</html> 参考技术D <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Barcode Example</title>
<script type="text/javascript" >
// 扩展API加载完毕后调用onPlusReady回调函数
document.addEventListener( "plusready", onPlusReady, false );
// 扩展API加载完毕，现在可以正常调用扩展API
function onPlusReady()
var e = document.getElementById("scan");
e.removeAttribute( "disabled" );
// 从图片中扫描
function scanImg()
plus.barcode.scan( '_www/barcode.png', function (type,result)
alert( "Scan success:("+type+")"+result );
, function (error)
alert( error.message );
);
</script>
<style type="text/css">
*
-webkit-user-select: none;
html,body
margin: 0px;
padding: 0px;
height: 100%;
</style>
</head>
<body >
<input id="scan" type='button' disabled="disabled" onclick='scanImg()' value='扫描图片'></input>
</body>
</html>
使用ZXing代码实现二维码扫描
1 首先下载Zxing的源码，然后将其中Android的版本导入到Android Studio
2 因为只需要二维码扫描的功能，所以只留下其中的四个包
其中 camera管理相机，decoding解析扫描到的二维码，view定义扫码的视图，MipcaActivityCapture是扫码的界面。
3 将res文件下的文件拷贝过来，注意是合并，不是简单的替换
4 修改AndroidMinifest.xml
5 修改由R引用带来的错误?
6 添加jar包，jar包导入不是简单的复制，要右键 add as library，导入成功后的jar包是可以展开的，如图?
7最终的结果如图
?有一个问题是取景框内的二维码被拉伸了。。。待解决。
解决方法是?
?Zxing 修改 CameraConfigurationManager.java文件的
void initFromCameraParameters(Camera camera)方法
在 Log.d(TAG, "Screen resolution: " + screenResolution);这句之后增加
?
- Point screenResolutionForCamera = new Point(); screenResolutionForCamera.x = screenResolution.x; screenResolutionForCamera.y = screenResolution.y; // preview size is always something like 480*320, other 320*480
- if (screenResolution.x < screenResolution.y) {
- screenResolutionForCamera.x = screenResolution.y;
- screenResolutionForCamera.y = screenResolution.x;
- }
- ?再把其后的一句代码改为
- cameraResolution = getCameraResolution(parameters, screenResolutionForCamera);
以上是关于html5+js实现二维码扫描的主要内容，如果未能解决你的问题，请参考以下文章