Question

我开发了一个ASP网站（目标是移动用户），主要功能是解码QR码。我决定使用ZXing作为解码器，如果我输入了QR码的良好图像，它可以完美地工作。但是当我通过直接从相机拍摄照片来改变QR码的来源时：

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

它不起作用。即使我尽可能稳定地拍摄照片，ZXing仍然无法从相机中解码该照片。问题是你知道解码从相机拍摄的二维码的最佳方法是什么？如果这需要付出很多努力，那么你是否有其他任何解码QR码的建议（使用ASP.NET的网络平台）。

Answer 1

所以，我已经有了解决方案。事实上，问题不在于ZXing，而在于拍摄图像的结果。因为当我尝试拍摄图像，并直接转换并将其显示到画布中时，图片的结果非常大。这就是为什么ZXing无法解码它。但是当我尝试首先管理画布图像（在我的情况下为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;
    };
}

使用ZXing直接从相机扫描QR码图片

1 个答案: