Сканирование изображения QR-кода прямо с камеры с помощью ZXing

Question

Я разработал веб-сайт ASP (цель для мобильных пользователей) с основной функциональностью для декодирования QR-кода. Я решил использовать ZXing в качестве декодера, и если я ввожу хорошее изображение QR-кода, он отлично работает. Но когда я изменить источник QR кода, беря изображение непосредственно с камеры:

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

Это не работает. Несмотря на то, что я делаю снимок настолько стабильным, насколько я могу, ZXing все еще не может декодировать это изображение с камеры. Вопрос в том, что вы знаете, что является лучшим способом декодирования QR-кода, который взят с камеры? Если это потребует больших усилий, то вы можете предложить другое предложение для декодирования QR-кода (с помощью веб-платформы ASP.NET).

Answer 1

Итак, у меня уже есть решение. На самом деле проблема связана не с ZXing, а с результатом взятого изображения. Потому что, когда я пытаюсь взять изображение и напрямую конвертировать и показывать его в холст, результат изображения огромен. Вот почему ZXing не смог его декодировать. Но когда я сначала пытаюсь управлять изображением холста (размером 400 х 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; 
    }; 
}