php - 在提交时从编码数据中裁剪图像 - ( File Pond - FilePondPluginFileEncode - imageEditEditor- Doka - Crop - PHP )
问题描述
使用“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 字符串,所以我们不必在服务器端进行裁剪?
任何帮助,将不胜感激。
解决方案
在 FilePond 实例中使用时,请记住将FilePondPluginImageTransform和 FilePondPluginFileEncode添加到您的 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 ://github.com/pqina/filepond-docs/blob/master/content/patterns/plugins/introduction.md
推荐阅读
- react-native - React Native Context调度删除当前屏幕(项目)导致渲染错误
- javascript - 猫鼬子文档数组不保存整个对象?
- maven - Gradle - 生成源代码并编译
- outlook - Outlook Web 加载项部署
- python - ValueError:检查输入时出错:预期 lstm_16_input 有 3 个维度,但得到的数组形状为 (836, 400, 3, 1)
- python - 为什么我的线程锁不能正常工作?
- javascript - 将信息从 Javascript 函数传递到表单
- python - Dash 允许下载 Excel Linux ubuntu
- azure-data-factory - 如何在arm模板中创建数据工厂的集成运行时
- php - 如何使用 Prestashop API 添加产品图片