如何从webcam.js上传Word64中的base64图像

Question

I am running into some trouble with a code and I was hoping somebody could bring some light :)

I am using webcamjs on a project that is like a small CRM inside a Wordpress website. I've created a form using ACF and we fill the forms from the frontend of the website, which is only visible to logged in users.

In the members page, I need to be able to take a picture from the webcam, and so far I have the webcam working and producing a base64 image.

What I need to do now, is be able to upload this image to the upload directory within WordPress and attach the link of the image to the field "photo" using the ACF plugin, so that all the information goes together. But this part is not working.

I wonder if I am calling the PHP file correctly from within the JS code and if the information from the JS is going to the PHP file.

Any help is highly appreciated!

<script language="JavaScript">
                Webcam.set({
                    width: 640,
                    height: 480,
                    image_format: 'jpeg',
                    jpeg_quality: 90
                });
                Webcam.attach( '#members_camera' );

                function take_snapshot() {
                    // take snapshot and acquire image data
                    Webcam.snap( function(data_uri) {
                        // snap complete, image data is in 'data_uri'

                        Webcam.on( 'uploadProgress', function(progress) {
                            // Upload in progress
                            // 'progress' will be between 0.0 and 1.0
                        } );

                        Webcam.on( 'uploadComplete', function(code, text) {

                            location.reload();

                            // Upload complete!
                            // 'code' will be the HTTP response code from the server, e.g. 200
                            // 'text' will be the raw response content
                        } );

                        var postid = '<?php echo $postid ?>';
                        var url = '<?php echo get_stylesheet_directory_uri() . '/inc/webcam/uploader.php?postid='; ?>' + postid;

                        Webcam.upload( data_uri, url, 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
                        } );
                    } );
                }
            </script>

This is the "uploader.php" file

require_once("../../../../../wp-load.php");

$name = date('YmdHis');
$imagename = $_SERVER['DOCUMENT_ROOT']."/wp-content/uploads/members_photos/".$name.".jpg";
move_uploaded_file($_FILES['webcam']['tmp_name'], $imagename);

$postid = $_GET['postid'];
update_field('foto', $imagename, $postid);

echo $postid;
echo $imagename;

Answer 1

I got it!

The problem was with my "uploader.php" file. It now looks like this:

require_once('../../../../../wp-load.php');

$name = date('YmdHis');
$upload_dir = wp_upload_dir();
$imagename = $upload_dir['basedir'] . '/members_photos/' . $name . '.jpg';

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

$home_url = home_url();
$member_pic_url = $home_url . '/wp-content/uploads/members_photos/' . $name . '.jpg';

$postid = $_GET['postid'];
update_field('foto', $member_pic_url, $postid);

I also had to go and create the directory manually. So if anyone has a better solution, I am open to it :)