可以使用拍照+jsQR.js实现将反码、正码二维码拍照解析。只是会有点慢，但至少可以解析出数据。
jsQR.js下载地址：https://github.com/cozmo/jsQR/tree/master/dist
本篇文章代码案例：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="../css/mui.min.css" rel="stylesheet" />
<style type="text/css">
.sizes {
width: 100%;
height: 420px;
margin-top: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">扫码</h1>
</header>
<div class="mui-content">
<canvas id="canvas1" class="sizes"></canvas>
<!--<img class="sizes" id="imgs" />-->
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/apps.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/jsqr/jsQR.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var getQrCodeValueNum = 0;
mui.init();
if(window.plus) {
console.log("window.plus");
plusready();
} else {
document.addEventListener('plusready', plusready, false);
console.log("addEventListener")
}
function plusready() {
getQrCodeValueNum = 0;
//处理返回事件
plus.key.addEventListener('backbutton', function() {
plus.nativeUI.closeWaiting();
plus.webview.currentWebview().close();
})
var canvas1 = document.getElementById('canvas1');
var context1 = canvas1.getContext('2d');
// 页面加载后，延迟调用摄像机拍照操作
var cmr = plus.camera.getCamera();
setTimeout(function() {
cmr.captureImage(successCB, errorCB, {});
}, 1000);
// 成功回执
function successCB(capturedFile) {
// 拍照图片保存路径
console.log(JSON.stringify(capturedFile));
if(capturedFile) {
console.log("6666");
plus.io.resolveLocalFileSystemURL(capturedFile, function(entry) {
console.log("successCB-->"+entry);
compressImage(entry.toLocalURL(),entry.name);
}, function(e) {
plus.nativeUI.toast("读取拍照文件错误：" + e.message);
});
}
}
// 失败回执
function errorCB(error) {
var code = error.code; // 错误编码
var message = error.message; // 错误描述信息
console.log("code:" + code + " msg:" + message);
mui.alert("拍照失败！", "温馨提示", "确定", function() {
plus.webview.currentWebview().close();
}, "div");
}
// 图片压缩
function compressImage(url,filename){
// var name="_doc/upload/"+filename;
// plus.zip.compressImage({
// src:url,//src: (String 类型 )压缩转换原始图片的路径
// dst:name,//压缩转换目标图片的路径
// quality:100,//quality: (Number 类型 )压缩图片的质量.取值范围为1-100
// overwrite:true,//overwrite: (Boolean 类型 )覆盖生成新文件
// width:'300',
// height:'420'
//
// },
// function(zip) {
// //页面显示图片
// showPics(zip.target,name);
// },function(error) {
// plus.nativeUI.toast("压缩图片失败，请稍候再试");
// });
showPics(url,name);
}
// 图片显示
function showPics(url,name){
//根据路径读取到文件
plus.io.resolveLocalFileSystemURL(url,function(entry){
entry.file( function(file){
plus.nativeUI.closeWaiting();
plus.nativeUI.showWaiting("获取图片中。。。");
var fileReader = new plus.io.FileReader();
fileReader.readAsDataURL(file);
fileReader.onloadend = function(e) {
var picUrl = e.target.result.toString();
console.log("picUrl-->\n"+picUrl);
// var img1 = $("#imgs").attr("src");//获取页面存放图片标签的值
// if(img1 =="" || img1 == undefined){
// $("#imgs").attr("src",picUrl);//将图片base64编码赋值给img标签
// console.log($("#imgs").attr("src"));
// }
// var code = jsQR($("#imgs").attr("src"), $("#imgs").width, $("#imgs").height, {
// inversionAttempts: "invertFirst"
// });
// console.log("code->"+code);
var imgs = new Image();
imgs.src = picUrl;
imgs.onload = function() {
console.log("imgs.onload");
plus.nativeUI.closeWaiting();
plus.nativeUI.showWaiting("正在加载。。。");
var ratio = getPixelRatio(context1);
console.log("ratio-->"+ratio);
canvas1.width = canvas1.width*ratio;
canvas1.height = canvas1.height*ratio;
// canvas1.width/2 必须 /2 不然解析不出来
context1.drawImage(imgs,0,0,canvas1.width/2,canvas1.height);
plus.nativeUI.closeWaiting();
plus.nativeUI.showWaiting("正在解析。。。");
var imageData = context1.getImageData(0, 0, canvas1.width, canvas1.height);
var code = jsQR(imageData.data, imageData.width, imageData.height, {
inversionAttempts: "invertFirst"
});
console.log("code->"+code);
if(code){
plus.nativeUI.closeWaiting();
plus.nativeUI.showWaiting("解析成功");
console.log(code.data);
drawLine(code.location.topLeftCorner, code.location.topRightCorner, "#FF3B58");
drawLine(code.location.topRightCorner, code.location.bottomRightCorner, "#FF3B58");
drawLine(code.location.bottomRightCorner, code.location.bottomLeftCorner, "#FF3B58");
drawLine(code.location.bottomLeftCorner, code.location.topLeftCorner, "#FF3B58");
if(getQrCodeValueNum <= 0) {
var qrCodeValue = code.data;
plus.nativeUI.closeWaiting();
plus.nativeUI.showWaiting("服务器请求中。。。");
// 请求服务器，保证只会请求一次
setTimeout(function(){
getInfaByQRResult(qrCodeValue);
},1500);
}
getQrCodeValueNum = getQrCodeValueNum + 1;
}else{
plus.nativeUI.closeWaiting();
mui.alert("解析失败，请重试！", "温馨提示", "确定", function() {
plus.webview.currentWebview().close();
}, "div");
}
}
}
});
});
}
// 画出二维码的部位
function drawLine(begin, end, color) {
context1.beginPath();
context1.moveTo(begin.x, begin.y);
context1.lineTo(end.x, end.y);
context1.lineWidth = 4;
context1.strokeStyle = color;
context1.stroke();
}
//获取canvas应该放大的倍数的方法(这样拍照的图片放入画布，能针对不同手机适配，提高清晰度)
function getPixelRatio(context) {
var backingStore = context.backingStorePixelRatio
|| context.webkitBackingStorePixelRatio
|| context.mozBackingStorePixelRatio
|| context.msBackingStorePixelRatio
|| context.oBackingStorePixelRatio
|| context.backingStorePixelRatio || 1;
return (window.devicePixelRatio || 1) / backingStore;
};
}
</script>
</body>
</html>
具体可以参考我的博客：
https://blog.csdn.net/qq_38322527/article/details/116033962
0 个评论
要回复文章请先登录或注册