Search code examples
phpcropimage-editingfilepond

Crop the image from encoded data on submission - ( File Pond - FilePondPluginFileEncode - imageEditEditor- Doka - Crop - PHP )

Is there any proper PHP code to use when cropping the image using the data that get passed from the hidden field when using the 'FilePondPluginFileEncode'? ( I'm using Doka as image editor) https://pqina.nl/doka/?ref=filepond

The below options get passed as encoded meta data from file-pond in a hidden field when I select an image and then edit crop. + the base64 image string ( https://pqina.nl/filepond/docs/patterns/plugins/file-encode/)

{"crop":{
  "center":{"x":0.6019359981,"y":0.5843676986},
  "rotation":0,
  "zoom":1,
  "aspectRatio":0.6567346851,
  "flip":{"horizontal":false,"vertical":false},
  "scaleToFit":true},
  "image":{"width":225,"height":148,"orientation":-1},
  "size":{"upscale":true,"mode":"cover","width":null,"height":null},
  "output":{"type":null,"quality":null,"background":null},
  "filter":null,
  "color":{"contrast":{"value":1,"matrix":[1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,1,0]},"
  exposure":{"value":1,"matrix":[1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,1,0]},"brightness": 
 {"value":0,"matrix":[1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,1,0]},"saturation": 
 {"value":1,"matrix":[1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,1,0]}
 },"markup":[],
  "colorMatrix":[1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,1,0]
}

enter image description here

On submit: This is what i have written to crop. It dose crop, but it's not exactly cropping as we select from file-pond doka image editor

<?php
if (isset($file_format['metadata']['crop'])) {
            $im = new \Imagick($uploaded_file->getRealPath());

            $aspectRatio = $file_format['metadata']['crop']['aspectRatio'];
            $crop_center_x = $file_format['metadata']['crop']['center']['x'];//percentage
            $crop_center_y = $file_format['metadata']['crop']['center']['y'];//percentage
            $scale =  $file_format['metadata']['crop']['zoom'];

            //Doka formula for aspectRatio = height/width
            //scale to original size but this crop width and height is slightly larger that what we select
            //this may need some improvement
            $crop_width  = ($im->getImageHeight()/$aspectRatio)/$scale; //width of crop selected
            $crop_height = ($im->getImageWidth()*$aspectRatio )/$scale; //height of crop selected

            //x_of_crop
            $x_center_crop =  $im->getImageWidth() * $crop_center_x; //pixels from left to crop center
            $y_center_crop = $im->getImageHeight() * $crop_center_y; //pixels from top to crop center

            $x_left = $x_center_crop - ($crop_width/2);//left position of crop
            $y_top = $y_center_crop - ($crop_height/2);//top position of crop

            $im->cropImaxge($crop_width,$crop_height,$x_left,$y_top);
            file_put_contents($filePath, $im);
            $uploaded_file = new UploadedFile($filePath, $file_format['name'], null, null, true);
        }
?>

Are we doing this correct or do we have any option to update the base64 string with the cropped image data, so we don't have to do cropping in the server side?

Any help would be appreciated.

Solution

  • Remember to add the FilePondPluginImageTransform, and FilePondPluginFileEncode, to your FilePond.registerPlugin when using imageEditEditor: Doka.create({}) in FilePond instance. 

     FilePond.registerPlugin(

        **FilePondPluginImageTransform,**
        FilePondPluginFileEncode,
        FilePondPluginFileValidateSize,
        FilePondPluginFileValidateType,
        FilePondPluginImagePreview,
        FilePondPluginImageEdit

      );

    FilePond.create(
   field.
   {
     imageEditEditor: Doka.create({})
   }
)

    by adding FilePondPluginImageTransform file-pond will update the cropped image based64 data as well. without that it will only update the meta-data field. https://github.com/pqina/filepond-docs/blob/master/content/patterns/plugins/image-transform.md

    so no need of PHP to the cropping. Javascript will crop and give you the cropped image base64 string in the data.

    example without using encoded string: https://medium.com/web-design-web-developer-magazine/leveraging-js-file-uploader-libraries-in-php-forms-example-using-filepond-754cdc9a8b48

    Available plugins : https://github.com/pqina/filepond-docs/blob/master/content/patterns/plugins/introduction.md