如何使用JavaScript解码图像中的QR码

本文概述

要求
实现

QR码简短而甜美(虽然非常有用), 但响应迅速(可以通过智能手机快速读取)。是的, 它们通常是由使用智能手机的人扫描的, 但是由于有了jsqrcode, 我们可以在没有摄像头的情况下完成扫描过程, 并解码来自普通(PNG或JPEG)图像的信息(采用base64格式, 从而更加具体并增加了准确性), 以防你在任何疯狂的公司(或自己的)项目中需要使用此功能。
【如何使用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码扫描器, 但这是另外一回事了, 你可以在该库的官方演示网站上看到一个有效的示例。
玩得开心！