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>
    AI-generated code. Review and use carefully. More info on FAQ.

  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();
?>
    AI-generated code. Review and use carefully. More info on FAQ.

  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
);
    AI-generated code. Review and use carefully. More info on FAQ.

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.