在提交时从编码数据中裁剪图像 - ( File Pond - FilePondPluginFileEncode - imageEditEditor- Doka - Crop - PHP )

Question

在使用 'FilePondPluginFileEncode' 时使用从隐藏字段传递的数据裁剪图像时，是否有任何适当的 PHP 代码可以使用？（我使用 Doka 作为图像编辑器）https://pqina.nl/doka/?ref=filepond

当我 select 图像然后编辑裁剪时，以下选项作为编码元数据从隐藏字段中的文件池传递。 + 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]
}

关于提交：这是我写给裁剪的内容。它会裁剪，但并不完全像我们 select 来自 file-pond 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 字符串，这样我们就不必在服务器端进行裁剪？

如有任何帮助，我们将不胜感激。

Answer 1

记得在 FilePond 中使用 imageEditEditor: Doka.create({}) 时将 FilePondPluginImageTransform， 和 FilePondPluginFileEncode， 添加到您的 FilePond.registerPlugin实例。

 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

在提交时从编码数据中裁剪图像 - ( File Pond - FilePondPluginFileEncode - imageEditEditor- Doka - Crop - PHP )

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

php

crop

image-editing

filepond