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

Question

我开发了一个ASP网站（目标是移动用户），主要功能是解码二维码。我决定使用ZXing作为解码器，如果我输入二维码的良好图像，它会完美工作。但当我用直接从相机上拍照来更改二维码的来源时

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

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

Answer 1

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