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

Posted 2023-02-25

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

【英文标题】：Crop the image from encoded data on submission - ( File Pond - FilePondPluginFileEncode - imageEditEditor- Doka - Crop - PHP )

【发布时间】：2020-01-06 23:52:48

【问题描述】：

在使用“FilePondPluginFileEncode”时使用从隐藏字段传递的数据来裁剪图像时，是否有任何适当的 php 代码可供使用？ （我使用 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]

提交时：这是我写的要裁剪的内容。它进行了裁剪，但并不像我们从文件池 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】：

记得在 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

【讨论】：

如果您确实想在服务器上应用裁剪，您可以使用doka-php 请注意，这目前不支持所有客户端功能（过滤器、标记、颜色等）。@ 987654325@ repo 也可能感兴趣。

谢谢@Rik。 :)