Inserting it to database after a capturing image

PHP
1

Now I want to insert the image name in my database and store the image ina folder. please help. thank you.

<!DOCTYPE html>
<html>
<head>
    <title>Capture webcam image with php and jquery - ItSolutionStuff.com</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>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
    <style type="text/css">
        #results { padding:20px; border:1px solid; background:#ccc; }
    </style>
</head>
<body>
  
<div class="container">
    <h1 class="text-center">Capture webcam image with php and jquery - ItSolutionStuff.com</h1>
   
    <form method="POST" action="storeImage.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>
  
<!-- Configure a few settings and attach camera -->
<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>

This is my store image code.

<?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);
  
    print_r($fileName);
  
?>
2

What have you tried so far? You know where you’re storing the image, you know how to insert values into a database table from your other posts, specifically where are you running into problems when you bring it all together?

3

Do you need to store the image in the database? Why not store it on the server and store the image URL in the database?

4

I originally thought it meant that, but the OP does say

1 Like
5

Well for 1, uploading files is part of the files super global variable, not post.

The whole idea of running base64 is wrong. If you want to store the image file on the server, it shouldn’t be encoded in base64.

file_put_contents is also wrong. What is the function for moving uploaded files?

6

I’ve been developing an upload image to my CMS developing and have a Github Repository - The Link

I’m sure with a few modifications it could easily do want you want it to do? Please note, I am still developing this script and it works, but there might be some bugs in it that I haven’t caught yet.

7

As I understood, OP…

…gets bas64-encoded image from web-cam;
…shows it in div ‘results’;
…saves it in hidden form-element.

Then on form submitting base64-decoding result saved in file and file-name (uri) should be saved in DB. It’s possible, why not.

Alternative: just to save base64-encoded image in DB completely. And which variant is better, it depends…

1 Like
8

Yeah, I just noticed when I went back and re-read the OP. I used Webcam.js as well, but I didn’t remember how I was able to save it as a file until I went back and looked at my code. All I did was convert the base64 image to a blob and then created a new image out of that blob and passed it through my form. Then checked $_FILES to make sure that file has the correct attributes I wanted. Sounds like a lot of work, but I was trying to make sure I can use $_FILES instead of $_POST.

9

okay sir I have found the solution already but now the hard part is how do I insert the webcam data over the network if I host it from localwebsite from one computer to another?

This is demo for my camera.


    <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>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
<body>
  
<div class="container">
    <h1 class="text-center">Visitor Management System</h1>
   
    <form method="POST" action="store.php" name="ronel" enctype="multipart/form-data">
        <div class="row">
            <div class="col-md-6">
                <div id="my_camera"></div>
                <br/>
               
                <input type=button value="Take Snapshot" onClick="take_snapshot()" name="image">
                <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 class="col-md-6 text-center">
                <br/>
                <button class="btn btn-success" name="ronel">Submit</button>
            </div>
        </div>
    </form>
</div>
  
<!-- Configure a few settings and attach camera -->
<script language="JavaScript">
    Webcam.set({
        width: 140,
        height: 150,
        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>

This is my store cam input in database.

<?php
    
$host="127.0.0.1";
$username="root";
$pass="";
$db="webcam";

$conn=mysqli_connect($host,$username,$pass,$db);
if(!$conn){
    die("Database connection error");
}

if(isset($_POST['ronel'])){

    $image = $_POST['image'];

    $imgsrc = "upload/";
  
    $image_parts = explode(";base64,", $image);
    $image_type_aux = explode("image/", $image_parts[0]);
    $image_type = $image_type_aux[1];
  
    $image_base64 = base64_decode($image_parts[1]);
    $fileName = uniqid() . '.jpg';
  
    $file = $imgsrc . $fileName;
    file_put_contents($file, $image_base64);
  
    print_r($fileName);
  

    
    $query="INSERT INTO `snapshot` (`image`) VALUES ('$image')";

    $res=mysqli_query($conn,$query);
    if($res){
        $_SESSION['success']="Not Inserted successfully!";
        header('Location:');
    }else{
        echo "<script>alert('Data not inserted! Kindly contact ITSUPPORT OTPC');</script>";
    }
   
  }
?>
10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.