本文概述
- 要求
- 实现
【如何使用JavaScript解码图像中的QR码】在本文中, 你将学习如何使用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 asyncqrcode.callback = function(decodedDATA){alert(decodedDATA);
};
// Start decoding the base64 stringqrcode.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="http://www.srcmini.com/Decode"/>
<
script type="text/javascript" src="http://www.srcmini.com/grid.js">
<
/script>
<
script type="text/javascript" src="http://www.srcmini.com/version.js">
<
/script>
<
script type="text/javascript" src="http://www.srcmini.com/detector.js">
<
/script>
<
script type="text/javascript" src="http://www.srcmini.com/formatinf.js">
<
/script>
<
script type="text/javascript" src="http://www.srcmini.com/errorlevel.js">
<
/script>
<
script type="text/javascript" src="http://www.srcmini.com/bitmat.js">
<
/script>
<
script type="text/javascript" src="http://www.srcmini.com/datablock.js">
<
/script>
<
script type="text/javascript" src="http://www.srcmini.com/bmparser.js">
<
/script>
<
script type="text/javascript" src="http://www.srcmini.com/datamask.js">
<
/script>
<
script type="text/javascript" src="http://www.srcmini.com/rsdecoder.js">
<
/script>
<
script type="text/javascript" src="http://www.srcmini.com/gf256poly.js">
<
/script>
<
script type="text/javascript" src="http://www.srcmini.com/gf256.js">
<
/script>
<
script type="text/javascript" src="http://www.srcmini.com/decoder.js">
<
/script>
<
script type="text/javascript" src="http://www.srcmini.com/qrcode.js">
<
/script>
<
script type="text/javascript" src="http://www.srcmini.com/findpat.js">
<
/script>
<
script type="text/javascript" src="http://www.srcmini.com/alignpat.js">
<
/script>
<
script type="text/javascript" src="http://www.srcmini.com/databr.js">
<
/script>
<
script>
// A qrcode with "ourcodeworld.com" as value in format base64 encodedvar 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 callbackqrcode.callback = callback;
// Start decodingqrcode.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码扫描器, 但这是另外一回事了, 你可以在该库的官方演示网站上看到一个有效的示例。
玩得开心 !
推荐阅读
- 在Phaser.js中为游戏实现免费的触摸操纵杆
- JavaScript语言中的语音识别API入门
- 如何使用JavaScript在浏览器中轻松创建寻字游戏(字母汤)
- 如何在Windows中使用命令提示符使用PhantomJS
- 如何在JavaScript中检查对象是否具有正确的属性
- 如何使用JavaScript和jQuery检测大写锁定(大写)是否按下
- 足不出户,一探古今,打造线上3D数字博物馆!
- UNITY3D 游戏开发之八Unity编译到iPhone运行 Collider 无法正常触发事件解决方案
- iOS底层面试题(下篇)