How can I send a image that are cropped/rotated using the cropzee.js jQuery library as a post message?

user_9827719 0
Viewed 78

I have sucessfully created a website that used the https://github.com/BossBele/cropzee library.

I have created a HTML form that takes inn a image from the user:

enter image description here

When the user has selected a image the Cropzee.js sucessfully loads and I can rotated/crop the image as expected:

enter image description here

Now I have the button Get Image (as blob / data-url) that gives me a alert box with a base64 image:

<button onclick="alert(cropzeeGetImage('cropzee-input'))">Get Image (as blob / data-url)</button>

enter image description here

I need to somehow send the base64 blob / data-url / image to my backend, I use PHP.

My HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Cropzee jQuery PHP</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width; initial-scale=1.0;"/>

    <!-- jQuery + cropzee.js -->
        <script type="text/javascript" src="javascripts/jquery/jquery.min.js"></script>
        <script src="javascripts/cropzee/cropzee.js" defer></script>
    <!-- //jQuery + cropzee.js -->

    <!-- CSS -->
        <style>
        .image-previewer {
            height: 300px;
            width: 300px;
            display: flex;
            border-radius: 10px;
            border: 1px solid lightgrey;
        }
        </style>
    <!-- //CSS -->
</head>
<body>


<h1>Upload</h1>

<!-- cropzee upload form -->
    
                    
    <label for="cropzee-input" class="image-previewer" data-cropzee="cropzee-input"></label>
    <input id="cropzee-input" type="file" name="cropzee-input" accept="image/*">
    <button onclick="alert(cropzeeGetImage('cropzee-input'))">Get Image (as blob / data-url)</button>
    <script>
    $(document).ready(function(){
        if (window.location.href.indexOf("#") > -1) {
            window.location = window.location.href.replace('#', '');
        }
        $("#cropzee-input").cropzee({startSize: [85, 85, '%'],});
    });
    </script>
<!-- //cropzee upload form -->

</body>
</html>
php jquery javascript
1 Answers

I have done this working to save the cropped image via Ajax Post to my PHP/MySQL backend.

Put a button to trigger the Ajax Call - like below

`<input type="button" onclick="uploadEx()" value="Upload" />`

Create a from with a hidden input - like below

`<form method="post" accept-charset="utf-8" name="form1">
    <input name="hidden_data" id='hidden_data' type="hidden"/>
</form>`

Now put the Ajax call jQuery - like below

            function uploadEx() {
                var canvas = document.getElementById("cropzee-input");
                var dataURL = canvas.toDataURL("image/jpeg");
                document.getElementById('hidden_data').value = dataURL;
                var fd = new FormData(document.forms["form1"]);

                var xhr = new XMLHttpRequest();
                xhr.open('POST', 'upload_data.php', true);

                xhr.upload.onprogress = function(e) {
                    if (e.lengthComputable) {
                        var percentComplete = (e.loaded / e.total) * 100;
                        console.log(percentComplete + '% uploaded');
                        alert('Succesfully uploaded');
                    } else {
                    alert('Captured data'); 
                    }
                };

                xhr.onload = function() {

                };
                xhr.send(fd);
            };
        ```

Lastly the PHP file upload_data.php looks like below 

` 
$upload_dir = "uploaded_files/profile_pictures/";
$img = $_POST['hidden_data'];
$img = str_replace('data:image/jpeg;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = $upload_dir . mktime() . ".jpeg";
$success = file_put_contents($file, $data);
print $success ? $file : 'Unable to save the file.'; `
user_39359060
Related