Обрезать изображение из закодированных данных при отправке - (File Pond - FilePondPluginFileEncode - imageEditEditor- Doka - Crop - PHP) - PullRequest
Новая
       39

Обрезать изображение из закодированных данных при отправке - (File Pond - FilePondPluginFileEncode - imageEditEditor- Doka - Crop - PHP)

0 голосов
/ 07 января 2020

Существует ли какой-либо правильный код PHP, который будет использоваться при кадрировании изображения с использованием данных, которые передаются из скрытого поля при использовании FilePondPluginFileEncode? (Я использую Doka в качестве редактора изображений) https://pqina.nl/doka/?ref=filepond

При выборе изображения и последующем редактировании указанные ниже параметры передаются в виде закодированных метаданных из файла-пруда в скрытом поле. подрезать. + строка изображения base64 (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

При отправке: это то, что я написал подрезать. Он дозирует кадрирование, но это не совсем обрезка, так как мы выбираем из редактора изображений Doka для файлового пруда 

<?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);
        }
?>

Правильно ли мы это делаем или у нас есть возможность обновить строку base64 данными обрезанного изображения, поэтому мы не должны делать обрезку на стороне сервера?

Любая помощь будет оценена.

1 Ответ

1 голос
/ 07 января 2020

Не забудьте добавить FilePondPluginImageTransform, и FilePondPluginFileEncode, к вашему FilePond.registerPlugin при использовании imageEditEditor: Doka.create({}) в экземпляре FilePond. 

 FilePond.registerPlugin(

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

      );

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

добавив FilePondPluginImageTransform file-pond, также обновит обрезанное изображение на основе 64 данных. без этого это только обновит поле метаданных. https://github.com/pqina/filepond-docs/blob/master/content/patterns/plugins/image-transform.md

, поэтому нет необходимости в PHP для обрезки. Javascript обрежет и предоставит вам обрезанную строку base64 в данных.

пример без использования закодированной строки: https://medium.com/web-design-web-developer-magazine/leveraging-js-file-uploader-libraries-in-php-forms-example-using-filepond-754cdc9a8b48

Доступные плагины: https://github.com/pqina/filepond-docs/blob/master/content/patterns/plugins/introduction.md

...