srcmini本文概述
QR码简短而甜美(虽然非常有用), 但响应迅速(可以通过智能手机快速读取)。是的, 它们通常是由使用智能手机的人扫描的, 但是由于有了jsqrcode, 我们可以在没有摄像头的情况下完成扫描过程, 并解码来自普通(PNG或JPEG)图像的信息(采用base64格式, 从而更加具体并增加了准确性), 以防你在任何疯狂的公司(或自己的)项目中需要使用此功能。
在本文中, 你将学习如何使用jsqrcode从base64值轻松扫描QR Code。
要求
为了实现我们的目标, 我们将依赖jsqrcode库。该库是由Lazar Laszlo创建的HTML5的JavaScript QRCode阅读器实现。你可以在Github的官方存储库中下载(或克隆)其源代码。源代码本身基于17个不同的JS文件(显然需要使用script标记将其加载到html文档中)。
实现
基本上, 要使用该库, 你需要使用两行代码, 设置一个回调以接收解码后的数据, 并将base64图像作为解码函数中的第一个参数提供：
// set the callback that receives the decoded content as the tasks is async
qrcode.callback = function(decodedDATA){
alert(decodedDATA);
};
// Start decoding the base64 string
qrcode.decode("data:image/png;.......");以下代码段显示了一个简单的html代码段中的最基本用法(可在本地免费下载和测试)。 imageURI变量在base64中包含QRCode图像(在这种情况下为PNG, 但可以为JPG), 它将在我们的自定义函数encodeImageFromBase64中作为第一个参数给出。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Decode QRCode from image using javascript</title>
</head>
<body>
<input type="button" id="action" value="Decode"/>
<script type="text/javascript" src="grid.js"></script>
<script type="text/javascript" src="version.js"></script>
<script type="text/javascript" src="detector.js"></script>
<script type="text/javascript" src="formatinf.js"></script>
<script type="text/javascript" src="errorlevel.js"></script>
<script type="text/javascript" src="bitmat.js"></script>
<script type="text/javascript" src="datablock.js"></script>
<script type="text/javascript" src="bmparser.js"></script>
<script type="text/javascript" src="datamask.js"></script>
<script type="text/javascript" src="rsdecoder.js"></script>
<script type="text/javascript" src="gf256poly.js"></script>
<script type="text/javascript" src="gf256.js"></script>
<script type="text/javascript" src="decoder.js"></script>
<script type="text/javascript" src="qrcode.js"></script>
<script type="text/javascript" src="findpat.js"></script>
<script type="text/javascript" src="alignpat.js"></script>
<script type="text/javascript" src="databr.js"></script>
<script>
// A qrcode with "ourcodeworld.com" as value in format base64 encoded
var imageURI = "data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAASIAAAEiAQMAAABncE31AAAABlBMVEX///8AAABVwtN+AAABA0lEQVRoge3ZUQ6CMAzG8SYcwCNx9R2JA5jU0a6ARKIP60z0/z0wZD+fmm1siBBCCPmfaMu93t/sEk8KKlv5jwrq3VT7jO4dqEy1lsT65mVS92vBUAOVKupbKmYm1DhljffpB/MXqp/aVmQfIuXNuo3qp46p4KIHlaFiTKzXRdrS4GszKlnJHCPBhkgF2z9RyWqvkNWlUdWrOqL6qZiP2kuoVWivGipT+cAosfsNOqHy1cm34txOuwBUhtKW2Hf52Zu8XLdRnVWxZtt3+duQ3gU1QD2d+kSFBDVUFX8ytZcj1Eh1OHMWQQ1Q1kSF2hb4ev5CdVTHFVl1/86FSleEEEJ+PQ/ANYzwx13NHQAAAABJRU5ErkJggg==";
/**
* The function decodeImageFromBase64 expects as first parameter a base64 string from a QRCode.
* As second parameter the callback that expects the data from the QRCode as first parameter.
*/
function decodeImageFromBase64(data, callback){
// set callback
qrcode.callback = callback;
// Start decoding
qrcode.decode(data)
}
// On button click, decode the qrCode from the base64 format.
document.getElementById("action").addEventListener('click', function(){
decodeImageFromBase64(imageURI, function(decodedInformation){
alert(decodedInformation);
});
}, false);
</script>
</body>
</html>
由你决定如何将图像(无论源是来自URL还是本地文件的任何来源)转换为base64格式以由jsqrcode库处理。
请注意, 你必须使用getUserMedia API来使用此扫描器代码, 以便使用网络摄像头创建实时QR码扫描器, 但这是另外一回事了, 你可以在该库的官方演示网站上看到一个有效的示例。
玩得开心 ！
评论前必须登录！
注册