Question

So I send the base64 image text to the php file with jquery/javascript like this:

//Upload picture
$('#uploadPictureBtnHtml').click(function(){
    OpenLoader();
   var baseEncPicData = $('#chosenPictureData').val();
    $.ajax({
        type:'POST', url:'upload_picture.php',  dataType:"json",  data:{ PicFile: baseEncPicData },
        success:function (upload_pic_data) {
            if (upload_pic_data[0] == 'true') {
                    alert("it worked!");
                    CloseLoader();
            }
            else{
                    //upload_pic_data[1] will return PHP errors
                    alert("Why it didnt work: "+upload_pic_data[1]+" ");
                    CloseLoader();
            }
        }
        });
});

I know this works fine because if I take the baseEncPicData variable and output it like this:

$('#some_div').html('<img src="data:image/jpeg;base64,'+baseEncPicData+'" />');

It works just great and the image shows without an issue.

When I send this to the PHP file, I decode and “reassemble” it like this:

$dataUno = htmlspecialchars(trim(urldecode($_POST['PicFile'])));
$dataDos = base64_decode($dataUno);
$data = imagecreatefromstring($dataDos);
$the_new_png = imagepng($data, $the_directory);

The error I receive is only in PHP which is:

 imagecreatefromstring() [function.imagecreatefromstring]: Empty string or invalid image
 imagepng() expects parameter 1 to be resource

Which leads me to believe that it’s not decoding the JSON correctly because there are characters being stripped that are part of the base64’d image. This is just an assumption.
Not exactly sure what I’m doing wrong. Any help would be awesome. Thanks for taking your time to read this.

Answer 1

Remove this string:

htmlspecialchars(trim(urldecode($_POST['PicFile'])));

… and process just $_POST['PicFile'] instead. With that preprocessing you turn all + characters (allowed in Base64) into spaces (), effectively broking the binary.