Comment puis-je prendre l'image du côté client (html) et l'enregistrer sur le côté serveur (Python)

Je suis nouveau sur python j'ai fait une application utilisant python en ce sens que je veux capturer des images de ma webcam en utilisant html et AJAX javascript et enregistrez-le sur python côté serveur. J'ai terminé la capture d'images à l'aide de HTML côté client mais je ne sais pas comment enregistrer et transmettre les données du côté client html au côté serveur python.Si quelqu'un a fait cela s'il vous plaît pouvez-vous m'aider ... MERCI À L'AVANCE ... My.html:Comment puis-je prendre l'image du côté client (html) et l'enregistrer sur le côté serveur (Python)

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Get User Media - Photo</title> 
</head> 
<body> 
<button id="take">Take a photo</button><br /> 
<video id="v"></video> 
<canvas id="canvas" style="display:none;"></canvas> 

<img src="D:/VoteTest/img.jpg" id="photo" alt="photo"> 
<script> 
    ;(function(){ 
     function userMedia(){ 
      return navigator.getUserMedia = navigator.getUserMedia || 
      navigator.webkitGetUserMedia || 
      navigator.mozGetUserMedia || 
      navigator.msGetUserMedia || null; 

     } 


     // Now we can use it 
     if(userMedia()){ 
      var videoPlaying = false; 
      var constraints = { 
       video: true, 
       audio:false 
      }; 
      var video = document.getElementById('v'); 

      var media = navigator.getUserMedia(constraints, function(stream){ 

       // URL Object is different in WebKit 
       var url = window.URL || window.webkitURL; 

       // create the url and set the source of the video element 
       video.src = url ? url.createObjectURL(stream) : stream; 

       // Start the video 
       video.play(); 
       videoPlaying = true; 
      }, function(error){ 
       console.log("ERROR"); 
       console.log(error); 
      }); 


      // Listen for user click on the "take a photo" button 
      document.getElementById('take').addEventListener('click', function(){ 
       if (videoPlaying){ 
        var canvas = document.getElementById('canvas'); 
        canvas.width = video.videoWidth; 
        canvas.height = video.videoHeight; 
        canvas.getContext('2d').drawImage(video, 0, 0); 
        var data = canvas.toDataURL('image/webp'); 
        document.getElementById('photo').setAttribute('src', data); 
       } 
      }, false); 



     } else { 
      console.log("KO"); 
     } 
    })(); 
</script> 
</body> 
</html>

Source

2017-10-21 shruthi

Je viens de faire ce récemment pour un projet. Vous pouvez utiliser XHR pour envoyer l'image à l'intérieur sous forme de données:

let formdata = new FormData(); 
formdata.append("image", data); 
let xhr = new XMLHttpRequest(); 
xhr.open('POST', 'http://yourserver/image', true); 
xhr.onload = function() { 
    if (this.status === 200) 
     console.log(this.response); 
    else 
     console.error(xhr); 
}; 
xhr.send(formdata);

J'ai eu du mal à utiliser le toDataURL pour convertir la toile, alors je toBlob pour une conversion plus facile:

canvas.toBlob(callBackToMyPostFunctionAbove, 'image/jpeg');

Voici un échantillon Fichier HTML avec JavaScript intégré et mon serveur Python.

HTML & de JavaScript intégré

Le JavaScript utilise:

getUserMedia pour démarrer un flux vidéo local
un clic de souris sur l'image pour lancer la capture d'image
une toile objet pour enregistrer une image à partir du flux getUserMedia
XHR pour envoyer le fichier en tant que données de formulaire

Le code:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Post an Image test</title> 
    <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script> 
</head> 
<style> 
    /* mirror the image */ 
    video, canvas { 
    transform: scale(-1, 1); /*For Firefox (& IE) */ 
    -webkit-transform: scale(-1, 1); /*for Chrome & Opera (& Safari) */ 
} 
</style> 
<body> 
<video id="myVideo" autoplay></video> 

<script> 

    let v = document.getElementById("myVideo"); 

    //create a canvas to grab an image for upload 
    let imageCanvas = document.createElement('canvas'); 
    let imageCtx = imageCanvas.getContext("2d"); 

    //Add file blob to a form and post 
    function postFile(file) { 
     let formdata = new FormData(); 
     formdata.append("image", file); 
     let xhr = new XMLHttpRequest(); 
     xhr.open('POST', 'http://localhost:5000/image', true); 
     xhr.onload = function() { 
      if (this.status === 200) 
       console.log(this.response); 
      else 
       console.error(xhr); 
     }; 
     xhr.send(formdata); 
    } 

    //Get the image from the canvas 
    function sendImagefromCanvas() { 

     //Make sure the canvas is set to the current video size 
     imageCanvas.width = v.videoWidth; 
     imageCanvas.height = v.videoHeight; 

     imageCtx.drawImage(v, 0, 0, v.videoWidth, v.videoHeight); 

     //Convert the canvas to blob and post the file 
     imageCanvas.toBlob(postFile, 'image/jpeg'); 
    } 

    //Take a picture on click 
    v.onclick = function() { 
     console.log('click'); 
     sendImagefromCanvas(); 
    }; 

    window.onload = function() { 

     //Get camera video 
     navigator.mediaDevices.getUserMedia({video: {width: 1280, height: 720}, audio: false}) 
      .then(stream => { 
       v.srcObject = stream; 
      }) 
      .catch(err => { 
       console.log('navigator.getUserMedia error: ', err) 
      }); 

    }; 

</script> 
</body> 
</html>

Il utilise adapter.js à Polyfill getUserMedia sur différents navigateurs sans aucune vérification d'erreur.

Python serveur

Et voici un exemple en Python en utilisant Flask comme serveur web:

from flask import Flask, request, Response 
import time 

PATH_TO_TEST_IMAGES_DIR = './images' 

app = Flask(__name__) 

@app.route('/') 
def index(): 
    return Response(open('./static/getImage.html').read(), mimetype="text/html") 

# save the image as a picture 
@app.route('/image', methods=['POST']) 
def image(): 

    i = request.files['image'] # get the image 
    f = ('%s.jpeg' % time.strftime("%Y%m%d-%H%M%S")) 
    i.save('%s/%s' % (PATH_TO_TEST_IMAGES_DIR, f)) 

    return Response("%s saved" % f) 

if __name__ == '__main__': 
    app.run(debug=True, host='0.0.0.0')

Source

2017-11-18 16:37:32 Chad

Comment puis-je prendre l'image du côté client (html) et l'enregistrer sur le côté serveur (Python)

Répondre

Questions connexes