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

Question

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

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

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

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; 
    }; 
}