[FIXED] PHP - get base64 img string decode and save as jpg (resulting empty image )

Issue

hi i'm actually sending a base64 image string trough ajax to a php script which just decodes string and save content as .jpg file.

But the result is an empty image.

How can this be possible?

php script:

$uploadedPhotos = array('photo_1','photo_2','photo_3','photo_4');
            foreach ($uploadedPhotos as $file) {
                if($this->input->post('photo_1')){
                     $photoTemp = base64_decode($this->input->post('photo_1'));


                    /*Set name of the photo for show in the form*/
                    $this->session->set_userdata('upload_'.$file,'ant');
                    /*set time of the upload*/
                    if(!$this->session->userdata('uploading_on_datetime')){
                     $this->session->set_userdata('uploading_on_datetime',time());
                    }
                     $datetime_upload = $this->session->userdata('uploading_on_datetime',true);
                    /*create temp dir with time and user id*/
                    $new_dir = 'temp/user_'.$this->session->userdata('user_id',true).'_on_'.$datetime_upload.'/';
                    @mkdir($new_dir);
                    /*move uploaded file with new name*/
                    @file_put_contents( $new_dir.$file.'.jpg',$photoTemp);


            }

For ajax it is ok because, echo $photoTemp returns the string.

i tried var_dump(@file_put_contents( $new_dir.$file.'.jpg',$photoTemp)); and it returns bool(true) since the image is saved but there is no content in the image :( empty image

for empty image i mean , file is created and named, and it has the same size of the content i pass to php, but when i try to open that image to preview it says, file can't be opened because corrupted or bad file type format

anyway this is the JS that takes photo as base64 and send that to php:

<script type="text/javascript">

var _min_width = 470;
var _min_height = 330;
var _which;
var _fyle_type;
var  io;
var allowed_types = new Array('image/png','image/jpg','image/jpeg');
if (typeof(FileReader) === 'function'){
$('input[type="file"]').on('change', function(e) {
    var _file_name = $(this).val();
    $('.'+_which+'_holder').text(_file_name);
    var file = e.target.files[0];

    if (!in_array(file.type,allowed_types) || file.length === 0){
        notify("You must select a valid image file!",false,false); 
        return;
    }

    if(file.size > 3145728 /*3MB*/){
        notify("<?php echo lang('each-photo-1MB'); ?>",false,false); 
        return;
    }
    notify_destroy();

    var reader = new FileReader();
    reader.onload = fileOnload;
  reader.readAsDataURL(file);


});

function fileOnload(e) {
    var img = document.createElement('img');
    img.src = e.target.result;

    img.addEventListener('load', function() {
        if(img.width < _min_width || img.height < _min_height ){
        notify("<?php echo lang('each-photo-1MB'); ?>",false,false); 
        return;
        }


        $.ajax({
            type:'post',
            dataType:'script',
            data:{photo_1:e.target.result},
            url:_config_base_url+'/upload/upload_photos',
            progress:function(e){
                console.log(e);
            },
            success:function(d){
                $('body').append('<img src="'+d+'"/>');
            }
         });


    });

}
}
</script>

Solution

AFAIK, You have to use image function imagecreatefromstring, imagejpeg to create the images.

$imageData = base64_decode($imageData);
$source = imagecreatefromstring($imageData);
$rotate = imagerotate($source, $angle, 0); // if want to rotate the image
$imageSave = imagejpeg($rotate,$imageName,100);
imagedestroy($source);

Hope this will help.

PHP CODE WITH IMAGE DATA

$imageDataEncoded = base64_encode(file_get_contents('sample.png'));
$imageData = base64_decode($imageDataEncoded);
$source = imagecreatefromstring($imageData);
$angle = 90;
$rotate = imagerotate($source, $angle, 0); // if want to rotate the image
$imageName = "hello1.png";
$imageSave = imagejpeg($rotate,$imageName,100);
imagedestroy($source);

So Following is the php part of your program .. NOTE the change with comment Change is here

    $uploadedPhotos = array('photo_1','photo_2','photo_3','photo_4');
     foreach ($uploadedPhotos as $file) {
      if($this->input->post($file)){                   
         $imageData = base64_decode($this->input->post($file)); // <-- **Change is here for variable name only**
         $photo = imagecreatefromstring($imageData); // <-- **Change is here**

        /* Set name of the photo for show in the form */
        $this->session->set_userdata('upload_'.$file,'ant');
        /*set time of the upload*/
        if(!$this->session->userdata('uploading_on_datetime')){
         $this->session->set_userdata('uploading_on_datetime',time());
        }
         $datetime_upload = $this->session->userdata('uploading_on_datetime',true);

        /* create temp dir with time and user id */
        $new_dir = 'temp/user_'.$this->session->userdata('user_id',true).'_on_'.$datetime_upload.'/';
        if(!is_dir($new_dir)){
        @mkdir($new_dir);
        }
        /* move uploaded file with new name */
        // @file_put_contents( $new_dir.$file.'.jpg',imagejpeg($photo));
        imagejpeg($photo,$new_dir.$file.'.jpg',100); // <-- **Change is here**

      }
    }

Answered By - Yogesh