Users Online
· Guests Online: 16
· Members Online: 0
· Total Members: 188
· Newest Member: meenachowdary055
· Members Online: 0
· Total Members: 188
· Newest Member: meenachowdary055
Forum Threads
Newest Threads
No Threads created
Hottest Threads
No Threads created
Latest Articles
Articles Hierarchy
Capture a photo from a camera and upload it to a database using PHP
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:
-
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.
" 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;">Capture Photo and Upload
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> -
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(); ?> - Create a PHP file (
-
Database Setup:
- Create a database and a table to store the images.
SQLCREATE 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.
Comments
No Comments have been Posted.
Post Comment
Please Login to Post a Comment.