用ZXing直接从相机扫描二维码图片

Scan the QR code picture directly from camera with ZXing

我开发了一个ASP网站(针对手机用户),主要功能是解码二维码。我决定使用 ZXing 作为解码器,如果我输入好的 QR 码图像,它就可以完美运行。但是当我通过直接从相机拍摄照片来更改二维码的来源时:

<input type="file" name="file" capture="camera" accept="image/*" id="cameraInput" name="cameraInput">

没用。即使我尽可能稳定地拍摄照片,ZXing 仍然无法从相机中解码该照片。 问题是你知道解码从相机中获取的 QR 码的最佳方法是什么吗?如果这会花费很多精力,那么你有没有其他解码QR码的建议(使用ASP.NET的网络平台)。

所以,我已经有了解决方案。事实上,问题不在于ZXing,而在于拍摄图像的结果。因为当我尝试拍摄图像时,直接将其转换并显示为canvas,结果图片非常大。这就是 ZXing 无法解码的原因。但是当我首先尝试管理 canvas 图像时(在我的例子中是 400 x 400 像素),将 base64 图像发送到服务器,在服务器中再次将其转换为图像,然后解码。它像魅力一样完美。

已编辑: 这是我用于解决方案的代码(为了使其可读,我删除了一些不相关的代码。希望我没有删除有用的部分)

var JsIndexPage = new function (jsonData) {
    this.pageData = {
        maxWidth: 400,
        maxHeight: 400
    };

    this.pageUI = {
        canvas: null,
        blankCanvas: null,
        messageDiv: null,
        cameraInput: null,
        uploadInput: null
    };

    this.initUI = function () {
        ///<summary>
        ///Display ui on the page
        ///</summary>

        this.pageUI.canvas = document.getElementById('capturedPhoto');
        this.pageUI.blankCanvas = document.getElementById('blank');
        this.pageUI.cameraInput = $('#cameraInput');
        this.pageUI.messageDiv = $("#message");
        this.pageUI.uploadInput = $('#uploadInput');

        //add triggers to buttons
        this.pageUI.cameraInput.on('change', function (e) {
            JsIndexPage.onCameraInputChanged(e);
        });

        this.pageUI.uploadInput.on('click', function () {
            JsIndexPage.onUploadInputClick();
        });
    };

    this.onCameraInputChanged = function (e) {
        /// <summary>
        /// On camera input changed write image to canvas
        /// </summary>

        var reader = new FileReader();
        reader.onload = function (event) {
            JsIndexPage.onFileSelected(event);
        }

        //contains the data as a URL representing the file's data as a base64 encoded string
        reader.readAsDataURL(e.target.files[0]);
    };

    this.onFileSelected = function (event) {
        ///<summary>
        /// Html5 file readed onLoad event handler
        ///</summary>

        var context = this.pageUI.canvas.getContext('2d');

        //instantiates the Image() object
        var img = new Image();
        img.onload = function () {

            //converts the sizes of image into the proper size (400 x 400 at maximum)
            if (img.width > JsIndexPage.pageData.maxWidth && img.height <= JsIndexPage.pageData.maxHeight) {
                JsIndexPage.pageUI.canvas.width = JsIndexPage.pageUI.maxWidth;
                JsIndexPage.pageUI.canvas.height = (JsIndexPage.pageUI.canvas.width / img.width) * img.height;
            }
            else if (img.width <= JsIndexPage.pageData.maxWidth && img.height > JsIndexPage.pageData.maxHeight) {
                JsIndexPage.pageUI.canvas.height = JsIndexPage.pageData.maxHeight;
                JsIndexPage.pageUI.canvas.width = (JsIndexPage.pageUI.canvas.height / img.height) * img.width;
            }
            else if (img.width <= JsIndexPage.pageData.maxWidth && img.height <= JsIndexPage.pageData.maxHeight) {
                JsIndexPage.pageUI.canvas.width = img.width;
                JsIndexPage.pageUI.canvas.height = img.height;
            }
            else if (img.width > JsIndexPage.pageData.maxWidth && img.height > JsIndexPage.pageData.maxHeight) {
                if (img.width > img.height) {
                    JsIndexPage.pageUI.canvas.width = JsIndexPage.pageData.maxWidth;
                    JsIndexPage.pageUI.canvas.height = (JsIndexPage.pageUI.canvas.width / img.width) * img.height;
                }
                else {
                    JsIndexPage.pageUI.canvas.height = JsIndexPage.pageData.maxHeight;
                    JsIndexPage.pageUI.canvas.width = (JsIndexPage.pageUI.canvas.height / img.height) * img.width;
                }
            }

            //draws the context to the canvas
            context.drawImage(img, 0, 0, JsIndexPage.pageUI.canvas.width, JsIndexPage.pageUI.canvas.height);
        }

        //changes the image source into the new one
        img.src = event.target.result;
    };
}