Scannez l'image de code QR directement à partir de la caméra avec ZXing

Question

J'ai développé un site Web ASP (la cible est pour les utilisateurs mobiles) avec la fonctionnalité principale pour décoder le code QR. J'ai décidé d'utiliser ZXing comme décodeur et si je saisis la bonne image du code QR, cela fonctionne parfaitement. Mais quand je change la source du code QR en prenant l'image directement à partir de l'appareil photo avec:

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

Il ne fonctionne pas. Même si je prends la photo aussi stable que possible, ZXing ne peut toujours pas décoder cette image de l'appareil photo. La question est de savoir quelle est la meilleure façon de décoder le code QR qui est pris à partir de la caméra? Si cela demande beaucoup d'efforts, alors avez-vous d'autres suggestions pour décoder le code QR (avec la plate-forme web d'ASP.NET).

Answer 1

Donc, j'ai déjà la solution. En fait, le problème n'est pas avec le ZXing, mais avec le résultat de l'image prise. Parce que lorsque j'essaie de prendre l'image et de la convertir directement en canvas, le résultat de l'image est énorme. C'est pourquoi ZXing n'a pas réussi à le décoder. Mais quand j'essaie de gérer l'image de toile d'abord (pour être 400 x 400 px dans mon cas), envoyez l'image base64 au serveur, convertissez-la en image à nouveau dans le serveur, et décodez-la. Cela fonctionne parfaitement comme un charme.

Modifié: Voici le code que j'ai utilisé pour la solution (pour le rendre lisible, je supprimer un code sans rapport avec tout va bien je ne l'ai pas enlever la partie utile cependant.)

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