上传捕获图像并将其存储在一个文件夹中，使用userID将其文件名更改为唯一

I have this code from this reference https://github.com/jhuckaby/webcamjs/blob/master/DOCS.md?fbclid=IwAR0Q3W5mw8qWlJEdiabmyZJiw7wGJ5YDPRl2Ej0IKF3GCt_78HXeqAEjI6Y

it will display the webcam and take snapshots and make it to an image element using the data_uri but the problem is I want to get that file and store it with a declared filename into a folder here's the script I use

<script src="webcam.js"></script> <!--source code script from github for webcam config-->

<div id="my_camera" style="width:320px; height:240px;"></div>
<div id="my_result"></div>

<script type=text/javascript>
    Webcam.attach( '#my_camera' );

    function take_snapshot() {
        Webcam.snap( function(data_uri) {
            document.getElementById('my_result').innerHTML = '<img src="'+data_uri+'"/>';
        } );
    }
</script>

<a href="javascript:void(take_snapshot())">Take Snapshot</a>

I have a button called register that functions like get all information being input and store it into the database like username first name etc together with the image taken by snapshot, here's my upload script in uploading images from a folder and I want to use it as getting the image data_uri and store it in a folder when I click the register button

    <?php
session_start();
include_once'database.php';
$uid = $_SESSION['u_id'];

if (isset($_POST['submit'])){
    $file = $_FILES['file'];

    $fileName = $_FILES['file']['name'];
    $fileTmpName = $_FILES['file']['tmp_name'];
    $fileSize = $_FILES['file']['size'];
    $fileError = $_FILES['file']['error'];
    $fileType = $_FILES['file']['type'];

    $fileExt = explode('.', $fileName);
    $fileActualExt = strtolower(end($fileExt));

    $allowed = array('jpg', 'jpeg', 'png');
   //check if ang uploaded file allowed i upload//
    if (in_array($fileActualExt, $allowed)){
            if ($fileError == 0){
                    if ($fileSize < 1000000){
                    $fileNameNew = "profile".$uid.".".$fileActualExt;
                    $fileDestination = 'uploads/'.$fileNameNew;
                    move_uploaded_file($fileTmpName, $fileDestination);
                    $sql = "UPDATE profileimg SET status=0 WHERE userID ='$uid';";
                    $result = mysqli_query($conn, $sql);
                    header("location:../pages/userpage.php");
                    }
                    else {
                        echo "Your file is too big";
                    }
            } else {
                echo "There was an error uploading you file!";
            }
    } else {
        echo "You cannot upload files of this type";
    }

}

I'm going to use this function as stated in the documentation

Webcam.upload( data_uri, 'myscript.php', function(code, text) {
        // Upload complete!
        // 'code' will be the HTTP response code from the server, e.g. 200
        // 'text' will be the raw response content
    } );

} );

and have this in my php script

move_uploaded_file($_FILES['webcam']['tmp_name'], 'webcam.jpg');

any idea how should I turn this script into the one I use above in my upload.php? thanks in advance

You need to create image first by image src and then need to save that in a specific folder. You can follow below code:

file_put_contents("fileNameWithLocation.png",file_get_contents($imageSrc));

Here fileNameWithLocation.png will be $fileNameNew = "profile".$uid.".".$fileActualExt; $fileDestination = 'uploads/'.$fileNameNew; You need to make modification accordingly. And $imageSrc will be the image src which you can post via Ajax or form submission.

Hope it helps you.