How to connect the CROPIT library and set it up on your site?

Question

JavaScript

I need to include this library scottcheng.github.io/cropit . I did this, but now I need this image that I crop, then it is transmitted via an AJAX request or via XMLHttpRequest, well, there it accordingly writes down the name of the image and adds the image itself to the server.

<form id="addForm" method="POST" enctype="multipart/form-data">
    <input name="title" type="text" placeholder="Название">
    <div class="image-editor">
        <input type="file" name="img" class="cropit-image-input">
        <!-- .cropit-image-preview-container is needed for background image to work -->
        <div class="cropit-image-preview-container">
            <div class="cropit-image-preview"></div>
        </div>
        <div class="image-size-label">
            Resize image
        </div>
        <input type="range" class="cropit-image-zoom-input">
    </div>
    <input id="sentAdd" type="submit" value="Добавить">
    <span id="result_sent"></span>
</form>

<script>
    $("#sentAdd").click(function(e){
        e.preventDefault();

        var imageData = $('.image-editor').cropit('export', {
            type: 'image/jpeg',
            quality: .9
        });

        $.confirm({
            'title'		: 'Вы уверенны что хотите добавить статью ?',
            'buttons'	: {
                'Да'	: {
                    'class'	: 'yes',
                    'action': function(){

                        var forms = $('#addForm');
                        var result = $('#result_sent');

                        var form = document.forms.addForm;
                        var formData = new FormData(form);

                        var img = new FormData(imageData);

                        var xhr = new XMLHttpRequest();
                        xhr.open("POST", "/php/addPP.php");

                        xhr.onreadystatechange = function() {
                            if (xhr.readyState == 4) {
                                if(xhr.status == 200) {
                                    data = xhr.responseText;
                                    if(data == 1) {
                                       alert(imageData);

                                    } else {
                                        result.html('<b id="red_res">Ошибка! Вы что то сделали не так</b>');
                                        result.find('b').delay(2000).fadeOut(500);
                                    }
                                }
                            }
                        };
                        xhr.send(formData, img);
                    }
                },
                'Нет'	: {
                    'class'	: 'no',
                    'action': function(){}
                }
            }
        });
    });
</script>

Answer 1

I found a solution. Base64 encoding is used there, you just need to pass this code to hidden, and on the php side, just re-encode it and that's it. Below is the code

<form method="POST" enctype="multipart/form-data">
    <div class="image-editor">
        <input name="imgs" type="file" class="cropit-image-input">
        <div class="cropit-image-preview"></div>
        <div class="image-size-label">
            Resize image
        </div>
        <input type="range" class="cropit-image-zoom-input">
        <input type="hidden" name="img" class="hidden-image-data">
    </div>
    <input type="submit" id="submit" value="Отправить">
</form>

<script>
    $(function() {
        $('.image-editor').cropit();
        $('.image-editor').cropit('previewSize', { width: 500, height: 750 });

        $('form').submit(function(e) {
            e.preventDefault();

            var imageData = $('.image-editor').cropit('export',{
                type: 'image/jpeg',
                quality: .6
            });
            var hidden = $('.hidden-image-data').val(imageData);


            var form = $('form');
            var formData = new FormData(form[0]);

            $.ajax({
                type: "POST",
                processData: false,
                contentType: false,
                url: "php/addPP.php",
                data:  formData,
                success: function(data){

                    alert(data);
                }
            })
        });
    });
</script>

<?
session_start();
include("db.php");

$img = $_POST['img'];
$img = str_replace('data:image/jpeg;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$year = time();
$img = file_put_contents('../img/'.$year.'.jpg', base64_decode($img));

$result = mysqli_query ($link, "INSERT INTO test (img) VALUES ('$year');");

echo $result;