Base64 image from cropit is getting clipped when decoded with PHP
<p>I'm using the cropit jquery plugin to manage image cropping on my website. The way I have it setup is that cropit will give me a base 64 string that I'll pass to PHP which will decode it and place it in the folder. The issue is that when I decode the string it will only make about 1/10 of the image, the rest will just be white / transparent. My code is as follows:</p>

<p>jQuery:</p>

<pre><code>    var username = "&lt;?php echo $userData['username']; ?&gt;";
    $('#image-cropper').cropit({
        imageState:{
            src:'users/'+username+'/profile_picture.jpg'
        },
    });   

    $('#image-cropper').cropit('previewSize', {width:500, height:500});


    $('.export').click(function() {
        var imageData = $('#image-cropper').cropit('export');
        //$("#code").val(imageData);
        window.open(imageData);
    }); 
</code></pre>

<p>PHP:</p>

<pre><code>function decode ($base64) {
    list($type, $base64) = explode(';', $base64);
    list(, $base64)      = explode(',', $base64);
    $code = base64_decode($base64);

    echo $userData['username'];

    file_put_contents('users/' . $userData['username'] . '/profile_picture.png', $base64);
}
</code></pre>

<p>The code I have here was working when I had the width/height of <code>$('#image-cropper').cropit('previewSize', {width:500, height:500});</code> set to 250. I had to change it because without a larger width/height it would save a very low resolution image which is still an issue but not as major. Any help would be great. Thanks!</p>

<p>base64 viewed in browser:
<a href="https://i.stack.imgur.com/IlFSE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IlFSE.png" alt="enter image description here"></a></p>

<p>base64 when decoded with PHP:
<a href="https://i.stack.imgur.com/rKocX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rKocX.png" alt="enter image description here"></a></p>