使用 HTML5 和 ASP.NET 的移动端一维/二维条码阅读器

• 下载演示 - 14.6 MB

引言

在移动平台上，HTML5 不仅受 Web 浏览器（如 Safari、Firefox、Opera、Chrome）支持，还受用于构建原生应用程序的 Web View UI 组件支持。 优势显而易见，任何熟悉 Web 编程的开发者都可以轻松创建出色的 Android 和 iOS 移动应用程序。 Dynamsoft 条码阅读器 SDK 为 Windows 提供 .NET API。 您可以在服务器端（IIS）实现条码读取模块，并使用 HTML5 检测从任何移动设备捕获的条码图像。

支持的 1D/2D 条码类型

• 一维码：Code 39、Code 93、Code 128、Codabar、Interleaved 2 of 5、EAN-8、EAN-13、UPC-A、UPC-E、Industrial 2 of 5
• 二维码：QRCode、DataMatrix、PDF417

支持的图像类型

• BMP、JPEG、PNG、GIF、TIFF、PDF

环境

• Windows、IIS

在 HTML5 中调用移动设备摄像头

要在 HTML5 中访问移动设备摄像头，您只需要一行代码

<input type="file" name="fileToUpload" id="fileToUpload" style="display: none;" accept="image/*" />

点击“获取图像”，原生相机应用程序将被带到前端。

拍照并切换回来后，您可以按如下方式获取图像数据

 var file = e.target.files[0], imageType = /image.*/;

    if (!file.type.match(imageType))
    {
        alert('The uploaded file is not supported.');
        return;
    }

    btnGrab.disabled = true;
    btnRead.disabled = true;

    loadImage(e.target.files[0],
        function (img) {

            $("#divBorder").empty();
            $('#divBorder').attr('min-height', '1px');
            document.getElementById('divBorder').appendChild(img);

            btnGrab.disabled = false;
            btnRead.disabled = false;
        });

使用 JavaScript 上传捕获的图像

将图像数据转换为 Base64 字符串

function scanBarcode() {
    var base64 = orgCanvas.toDataURL('image/jpeg', 0.7);
    var data = base64.replace(/^data:image\/(png|jpeg|jpg);base64,/, "");
    var imgData = JSON.stringify({
        Base64Data: data,
        BarcodeType: getBarcodeFormat().toString(),
        MultiBarcodes: document.getElementById('chkMultiBarcodes').checked
    });

    readBarcodeRequest(imgData);
}

使用 XMLHttpRequest 将 JSON 数据发送到 Web 服务器

function readBarcodeRequest(data) {
    xhr = new XMLHttpRequest();
    
    xhr.addEventListener("load", uploadComplete, false);

    xhr.addEventListener("error", uploadFailed, false);

    xhr.addEventListener("abort", uploadCanceled, false);

    xhr.upload.addEventListener('progress',uploadProgress, false);

    xhr.open("POST", "MobilecamBarcodeReader.ashx");
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.send(data);
}

在 ASP.NET 中处理 JSON 数据

使用 StreamReader 获取流数据

context.Request.InputStream.Position = 0;
                string jsonString;
                using (var inputStream = new StreamReader(context.Request.InputStream))
                {
                    jsonString = inputStream.ReadToEnd();
                }

将字符串转换为 JSON 对象

var postData = JsonConvert.DeserializeObject<PostData>(@jsonString);
                
                if (postData == null) return;
                var iMaxNumbers = postData.MultiBarcodes ? 100 : 1;

在 IIS 服务器端读取条码

指定有效的许可证以使检测 API 正常工作

public static BarcodeResult[] GetBarcode(string strImgBase64, Int64 format, int iMaxNumbers)
        {
            var reader = new Dynamsoft.Barcode.BarcodeReader();
            var options = new ReaderOptions
            {
                MaxBarcodesToReadPerPage = iMaxNumbers,
                BarcodeFormats = (BarcodeFormat) format
            };

            reader.ReaderOptions = options;
            reader.LicenseKeys = "<license>";
            return reader.DecodeBase64String(strImgBase64);
        }

var strResult = "";
                BarrecodeReaderRepo.Barcode(postData.Base64Data, postData.BarcodeType, iMaxNumbers, ref strResult);

                strResult += DateTime.Now;
                context.Response.Write(strResult);

您可以使用 Base64 字符串、字节数组或文件名作为输入。

在线演示和示例代码

如果您对该解决方案感兴趣，请访问 在线条码演示 试用。 此外，您可以下载 示例代码 以自行构建移动端条码阅读器应用程序。 有关 Dynamsoft 条码阅读器 的更多信息，请联系 support@dynamsoft.com。