Capture a photo from a camera and upload it to a database using PHP
Posted by Superadmin on September 06 2024 17:46:45
 Capture a photo from a camera and upload it to a database using PHP

To capture a photo from a camera and upload it to a database using PHP, you can use a combination of HTML5, JavaScript, and PHP. Here’s a step-by-step guide:

  1. HTML and JavaScript for Capturing the Photo:

    • Create an HTML file to display the camera feed and capture the image.
    • Use JavaScript to handle the camera and capture the image.

    Capture Photo and Upload


    Your captured image will appear here...

    " style="position: relative; display: block; border: 1px solid var(--cib-color-stroke-neutral-primary); border-radius: var(--cib-border-radius-large); clear: both; margin-block: 24px 12px;">
    HTML
    <!DOCTYPE html>
    <html>
    <head>
        <title>Capture Photo and Upload</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/webcamjs/1.0.25/webcam.min.js"></script>
        <style>
            #results { padding:20px; border:1px solid; background:#ccc; }
        </style>
    </head>
    <body>
        <div class="container">
            <h1 class="text-center">Capture Photo and Upload</h1>
            <form method="POST" action="upload.php">
                <div class="row">
                    <div class="col-md-6">
                        <div id="my_camera"></div>
                        <br/>
                        <input type=button value="Take Snapshot" onClick="take_snapshot()">
                        <input type="hidden" name="image" class="image-tag">
                    </div>
                    <div class="col-md-6">
                        <div id="results">Your captured image will appear here...</div>
                    </div>
                    <div class="col-md-12 text-center">
                        <br/>
                        <button class="btn btn-success">Submit</button>
                    </div>
                </div>
            </form>
        </div>
    
        <script language="JavaScript">
            Webcam.set({
                width: 490,
                height: 390,
                image_format: 'jpeg',
                jpeg_quality: 90
            });
    
            Webcam.attach('#my_camera');
    
            function take_snapshot( ) {
                Webcam.snap(function(data_uri) {
                    $(".image-tag").val(data_uri);
                    document.getElementById('results').innerHTML = '<img src="'+data_uri+'"/>';
                });
            }
        </script>
    </body>
    </html>
    
  2. PHP Script to Handle the Upload:

    • Create a PHP file (upload.php) to handle the image upload and save it to the database.
    PHP
    <?php
    $img = $_POST['image'];
    $folderPath = "upload/";
    
    $image_parts = explode(";base64,", $img);
    $image_type_aux = explode("image/", $image_parts[0]);
    $image_type = $image_type_aux[1];
    $image_base64 = base64_decode($image_parts[1]);
    $fileName = uniqid() . '.png';
    
    $file = $folderPath . $fileName;
    file_put_contents($file, $image_base64);
    
    // Database connection
    $conn = new mysqli("localhost", "username", "password", "database");
    
    // Check connection
    if ($conn->connect_error) {
        die("Connection failed: " . $conn->connect_error);
    }
    
    $sql = "INSERT INTO images (image) VALUES ('$fileName')";
    
    if ($conn->query($sql) === TRUE) {
        echo "New record created successfully";
    } else {
        echo "Error: " . $sql . "<br>" . $conn->error;
    }
    
    $conn->close();
    ?>
    
  3. Database Setup:

    • Create a database and a table to store the images.
    SQL
    CREATE DATABASE image_upload;
    USE image_upload;
    
    CREATE TABLE images (
        id INT AUTO_INCREMENT PRIMARY KEY,
        image VARCHAR(255) NOT NULL
    );
    

This setup will allow you to capture an image from the webcam, display it on the page, and upload it to the server where it will be saved in a directory and its path stored in the database1.