Как обрезать и выгружать фотографию с помощью плагина jQuery с помощью php

Итак, я нашел этот плагин подкачки фотографий под названием cropit. Демо здесь. Так что я хочу сделать, это захватить обрезанную фотографию и загрузить имя фотографии в базу данных mysql и сохранить ее в каталоге с помощью php.

Пока у меня есть это:

HTML:

<form method="POST">
    <div class="image-editor">
        <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">
        <input type="hidden" name="image-data" class="hidden-image-data" />
        <button type="submit">Submit</button>
    </div>
</form>

jQUERY:

    $('form').submit(function() {
        // Move cropped image data to hidden input
        var imageData = $('.image-editor').cropit('export');
        $('.hidden-image-data').val(imageData);

        // Print HTTP request params
        var formValue = $(this).serialize();
        $('#result-data').text(formValue);

        // Prevent the form from actually submitting
        return false;
    });

Все, что мне нужно, это настроить код php, потому что, когда я обрезаю фотографию и выбираю submit, jquery возвращает код сериализации, и появляется весь этот код, который я обычно не знаком. Вот несколько символов сериализованного кода jquery возвращает:

image-data=data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhE...

Ответ 1

1. Сохранение кодированного изображения base64

    <?php
    //save your data into a variable - last part is the base64 encoded image
    $encoded = "data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhE";

    //decode the url, because we want to use decoded characters to use explode
    $decoded = urldecode($encoded);

    //explode at ',' - the last part should be the encoded image now
    $exp = explode(',', $decoded);

    //we just get the last element with array_pop
    $base64 = array_pop($exp);

    //decode the image and finally save it
    $data = base64_decode($base64);
    $file = 'data.png';

    //make sure you are the owner and have the rights to write content
    file_put_contents($file, $data);

2. Получение имени файла с кодировкой base64

    $encoded = "data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhE";
    $decoded = urldecode($encoded);
    $exp = explode(';', $decoded);
    $exp = explode(':', $exp[0]);
    $image = array_pop($exp);
    echo ($image);

Ответ 2

Я получил ответ Hosch Nok на работу, не декодируя закодированные данные. Не вызывать:

$decoded = urldecode($encoded);

Но работает непосредственно с переменной $encoded.