How do i take picture from client side(html) and save it to server side(Python)

Posted on

Question :

How do i take picture from client side(html) and save it to server side(Python)

I’m new to python i did one application using python in that i want to capture Images from my webcam using html and AJAX javascript and save it to server side python. I have completed capturing of images from using client side HTML but i don’t know how to save and pass the data from html client side to server side python.If anybody did this please can you help me…

<!doctype html>
<html lang="en">
    <meta charset="UTF-8">
    <title>Get User Media - Photo</title>
<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">
        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,
            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
                videoPlaying  = true;
            }, function(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 {
Asked By: shruthi


Answer #1:

I just did this recently for a project. You can use XHR to send the image inside form data:

let formdata = new FormData();
formdata.append("image", data);
let xhr = new XMLHttpRequest();'POST', 'http://yourserver/image', true);
xhr.onload = function () {
    if (this.status === 200)

I had trouble using the toDataURL to convert the canvas, so I used toBlob for an easier conversion:

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

Here is a sample HTML file with embedded JavaScript and my Python server.

HTML & Embedded JavaScript

The JavaScript uses:

  1. getUserMedia to start a local video stream
  2. a mouse click on the image to initiate the image capture
  3. a canvas object to save an image from the getUserMedia stream
  4. XHR to send the file as form data

The code:

<!DOCTYPE html>
    <title>Post an Image test</title>
    <script src=""></script>
    /* mirror the image */
    video, canvas {
    transform: scale(-1, 1); /*For Firefox (& IE) */
    -webkit-transform: scale(-1, 1); /*for Chrome & Opera (& Safari) */
<video id="myVideo" autoplay></video>


    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();'POST', 'http://localhost:5000/image', true);
        xhr.onload = function () {
            if (this.status === 200)

    //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() {

    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)



This uses adapter.js to polyfill getUserMedia on different browsers without any error checks.

Python Server

And here is a sample in Python using Flask as a web server:

from flask import Flask, request, Response
import time


app = Flask(__name__)

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"))'%s/%s' % (PATH_TO_TEST_IMAGES_DIR, f))

    return Response("%s saved" % f)

if __name__ == '__main__':, host='')
Answered By: Chad

Answer #2:

If you are looking for php in server side, here is how I did it.

Post the image data to php script using jquery:

var imgData = canvas.toDataURL('image/png');
$.post("https://path-to-your-script/capture.php", {image: imgData},
    function(data) {

The php script will be like:


$data = $_POST['image'];

// remove "data:image/png;base64," from image data.
$data = str_replace("data:image/png;base64,", "", $data);

// save to file
file_put_contents("/tmp/image.png", base64_decode($data));

Leave a Reply

Your email address will not be published. Required fields are marked *