0

使用“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]
}

在此处输入图像描述

提交时:这是我写的作物。它进行了裁剪,但是当我们从 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 字符串,所以我们不必在服务器端进行裁剪?

任何帮助,将不胜感激。

4

1 回答 1

1

在 FilePond 实例中使用时,请记住将FilePondPluginImageTransformFilePondPluginFileEncode添加到您的 FilePond.registerPlugin。imageEditEditor: Doka.create({})

 FilePond.registerPlugin(

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

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

通过添加 FilePondPluginImageTransform file-pond 也将更新裁剪的图像 based64 数据。没有它,它只会更新元数据字段。 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

于 2020-01-07T04:06:08.833 回答