Base64 Cropping Images

Question

The following code takes a base64 string provided by a plugin called cropit and converts it to an image.

list($type, $base64) = explode(';', $base64);
list(, $base64)      = explode(',', $base64);
$base64 = str_replace("data:image/jpeg;base64,", "", $base64);
$base64 = base64_decode($base64);

file_put_contents($directory, $base64);

I also provided my javascript which sends base64 to php function with input. I know that the problem is caused by PHP, because when I post imageDatato a new window, the image will be displayed without problems.

$('.export_upload').click(function() {
    $("#upload_form_identifier").val("upload_form");

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

    //Set value of hidden input to base64
    $("#hidden_base64_upload").val(imageData);

    //Pause form submission until input is populated
    window.setTimeout(function() {
        document.upload_form.submit();
    }, 1000);
});

The problem I am facing is that if I enter an image, it will copy it in a random place. Can PHP run out of memory? I am not very good at base64, so I really don't know what could be causing this. Any help would be great.

Original Image:

After base64 PHP processes:

Answer 1

, , , . , originalSize: true , , base64. , , - originalSize false, , . .

$('.export_upload').click(function() {
            $("#upload_form_identifier").val("upload_form");

            $('.image-editor-upload').cropit('previewSize', {width:1024, height:1024});

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



            //Set value of hidden input to base64
            $("#hidden_base64_upload").val(imageData);

            //Pause form submission until input is populated
            window.setTimeout(function() {
                window.open(imageData);
                document.upload_form.submit();
            }, 1000);
        });

$('.image-editor-upload').cropit('previewSize', {width:1024, height:1024});. php-. , javascript, , , php, , , .

. true false . , , , , .

/**
 * Checks the dimensions of the provided image
 * @param  string $base64_image Base64 string of the image
 * @param  string $width Desired width of the image
 * @param  string $height Desired height of the image
 * @return bool True if dimensions match, false if dimensions do not match
 */
public function checkImageDimensions ($base64_image, $width, $height) {
    list($type, $base64_image) = explode(';', $base64_image);
    list(, $base64_image)      = explode(',', $base64_image);
    $base64_image = base64_decode($base64_image);

    $dimensions = getimagesizefromstring($base64_image);

    if ($dimensions[0] == $width && $dimensions[1] == $height) {
        return true;
    } else if ($dimensions[0] !== $width && $dimensions[1] !== $height) {
        return false;
    }
}