搜索pkshetlie / image-bundle
提供用于在symfony2中上传图片的字段，包括使用jQuery上传和jcrop裁剪图片的捆绑包
Requires
- php: >=7.1.3
- ext-gd: *
- friendsofsymfony/jsrouting-bundle: @stable
- jms/translation-bundle: ^1.2.2
- symfony/config: 5.*
- symfony/form: 5.*
- symfony/http-foundation: 5.*
- symfony/routing: 5.*
- symfony/twig-bridge: 5.*
- symfony/validator: 5.*
- twig/extensions: 5.*
- twig/twig: 5.*
README
简介
Symfony2的图片上传/裁剪捆绑包
此捆绑包可以帮助您轻松地在表单中创建图片上传/裁剪字段。您不需要使用任何类型的生成器或没有其他要求。它使用bootstrap来使其看起来很好，但您可以使用任何其他css来自定义它。
它使用美观的Jquery File Upload上传文件（原始UploadHandler已被修改以添加命名空间和新的配置参数以生成随机文件名），以及JCrop来让您裁剪上传的图片。
与ComurContentAdminBundle配合工作得非常好。如果您不知道它是做什么的，看看它，你会感到惊讶！此捆绑包可以帮助您轻松创建具有内联编辑功能的精美管理员！！
如果这个捆绑包帮助您减少了开发时间，您可以请我喝杯咖啡；)
使用哪个版本
⚠️ 使用1.X版本与bootstrap 2.x兼容。
⚠️ 不再维护与bootstrap 2.X的兼容性。
⚠️ 我将不再维护Symfony 2，我将只合并1.2分支上的PR以实现与SF2的兼容性。如果您需要某些东西，您始终可以创建一个PR，我将合并它。
⚠️ 动画GIF裁剪仅适用于imagick。
更新日志
请参见CHANGELOG.md
屏幕截图
以下是一些屏幕截图，因为我没有时间制作演示。
简单图片小部件
画廊小部件
上传图片屏幕
从图库选择图片屏幕
裁剪图片屏幕
更改画廊图片顺序屏幕
依赖项
捆绑包在资产中使用以下包（参见bower.json）
您可以通过使用模态模板包含参数来禁用这些资产的自动包含（参见步骤4）
安装
使用Symfony Flex的应用程序
步骤1：下载捆绑包
打开命令行，进入您的项目目录，并执行以下操作
$ composer require comur/content-admin-bundle
步骤2：启用其他捆绑包
然后，通过将其添加到项目config/bundles.php文件中注册的捆绑包列表中，启用捆绑包
// config/bundles.php return [ // ... Comur\ImageBundle\ComurImageBundle::class => ['all' => true], FOS\JsRoutingBundle\FOSJsRoutingBundle::class => ['all' => true], JMS\TranslationBundle\JMSTranslationBundle::class => ['all' => true], ];
不使用Symfony Flex的应用程序
步骤1：下载捆绑包
打开命令行，进入您的项目目录，并执行以下命令以下载此捆绑包的最新稳定版本
$ composer require comur/content-admin-bundle
此命令要求您已全局安装Composer，如Composer文档中的安装章节中所述。
步骤2：启用捆绑包和依赖捆绑包
然后，通过将其添加到项目app/AppKernel.php文件中注册的捆绑包列表中，启用捆绑包
// app/AppKernel.php // ... class AppKernel extends Kernel { public function registerBundles() { $bundles = [ // ... new Comur\ImageBundle\ComurImageBundle(), new FOS\JsRoutingBundle\FOSJsRoutingBundle(), new JMS\TranslationBundle\JMSTranslationBundle(), ]; // ... } // ... }
步骤3：将此路由添加到您的routing.yml
# app/config/routing.yml fos_js_routing: resource: "@FOSJsRoutingBundle/Resources/config/routing/routing.xml" comur_image: resource: "@ComurImageBundle/Resources/config/routing.yml" prefix: / ``` ### Step 4: Add Modal template after body tag of your layout: ```twig <body> {% include "ComurImageBundle:Form:croppable_image_modal.html.twig"%} … </body>
注意： 此模板包含许多脚本和样式，包括jQuery和Bootstrap。您可以使用以下参数避免包含jQuery和/或Bootstrap
{% include "ComurImageBundle:Form:croppable_image_modal.html.twig" with {'include_fontawesome': false, 'include_jquery': false, 'include_bootstrap': false, 'bootstrap_version': 4} %}
⚠️ bootstrap_version 用于解决Bootstrap 4兼容性问题。如果您使用bundle包含Bootstrap，它将使用Bootstrap 4并自动将其设置为4。如果您需要使用Bootstrap 3，请删除bootstrap_version参数或将3。
步骤5：不要忘记将 FOSJsRoutingBundle 脚本放入您的
<script src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script> <script src="{{ path('fos_js_routing_js', {"callback": "fos.Router.setData"}) }}"></script>
💥 就这么简单！
配置
所有参数都是可选的
comur_image: config: cropped_image_dir: 'cropped' thumbs_dir: 'thumbnails' media_lib_thumb_size: 150 public_dir: '%kernel.project_dir%/public/uploads' translation_domain: 'ComurImageBundle' gallery_thumb_size: 150 gallery_dir: 'gallery'
cropped_image_dir
用于确定放置裁剪图像的相对目录名称（见上方）。
默认值： 'cropped'
thumbs_dir
用于确定放置缩略图的相对目录名称（见上方）。
默认值： 'thumbnails'
media_lib_thumb_size
用于确定媒体库中使用的像素（方形）缩略图大小。
默认值 150
public_dir
您公共目录的路径。它用于在thumb twig助手中检查缩略图的存在，并且您的上传目录将相对于此目录（由于安全修复#80）。
默认值： '%kernel.project_dir%/public'
translation_domain
翻译的域名。例如提供两种语言（en & fr）。要覆盖域名，请将此参数更改为您想要的任何内容。
默认值： 'ComurImageBundle'
gallery_thumb_size
这是您希望在画廊小部件中显示的图像像素大小。
默认值 150
gallery_dir
这是画廊目录名称。小部件将存储所有画廊图像在您添加小部件时给出的根目录内的特定目录中。
例如。 如果您在添加小部件时将'uploads/images'作为webDir，则画廊图像将存储在'uploads/images/[gallery_dir]'中。这是为了使画廊使用更简单，您不需要在实体中添加新函数来获取画廊目录。
用法
此bundle提供了两个小部件。它们具有完全相同的配置参数。
图像小部件
在表单中使用小部件（与SonataAdmin一起使用）以创建简单的图像字段
public function buildForm(FormBuilderInterface $builder, array $options) { // get your entity related with your form type $myEntity = $builder->getForm()->getData(); ... ->add('image', CroppableImageType::class, array( 'uploadConfig' => array( 'uploadRoute' => 'comur_api_upload', //optional 'uploadDir' => $myEntity->getUploadDir(), // required - see explanation below (you can also put just a dir name relative to your public dir) // 'uploadUrl' => $myEntity->getUploadRootDir(), // DEPRECATED due to security issue !!! Please use uploadDir. required - see explanation below (you can also put just a dir path) 'webDir' => $myEntity->getUploadDir(), // required - see explanation below (you can also put just a dir path) 'fileExt' => '*.jpg;*.gif;*.png;*.jpeg', //optional 'maxFileSize' => 50, //optional 'libraryDir' => null, //optional 'libraryRoute' => 'comur_api_image_library', //optional 'showLibrary' => true, //optional 'saveOriginal' => 'originalImage', //optional 'generateFilename' => true //optional ), 'cropConfig' => array( 'disable' => false, //optional 'minWidth' => 588, 'minHeight' => 300, 'aspectRatio' => true, //optional 'cropRoute' => 'comur_api_crop', //optional 'forceResize' => false, //optional 'thumbs' => array( //optional array( 'maxWidth' => 180, 'maxHeight' => 400, 'useAsFieldImage' => true //optional ) ) ) ))
您需要创建一个字段（在这个例子中命名为image，但您可以选择任何您想要的名称）
// YourBundle\Entity\YourEntity.php ... /** * @ORM\Column(type="string", length=255, nullable=true) */ protected $image; ...
并在您的实体中创建函数以获得目录路径，例如
/* DEPRECATED, Use upload dir public function getUploadRootDir() { // absolute path to your directory where images must be saved return __DIR__.'/../../../../../web/'.$this->getUploadDir(); }*/ /* Directory relative to your public dir (see public_dir in configuration) public function getUploadDir() { return 'uploads/myentity'; } public function getWebPath() { return null === $this->image ? null : '/'.$this->getUploadDir().'/'.$this->image; }
就是这样！这将向您的表单添加一个带有编辑按钮的图像预览，并允许您在不重新加载页面的情况下上传/从库中选择并裁剪图像。
为了保存原始图像路径，您必须创建另一个字段，并将其命名为saveOriginal参数的名称
// YourBundle\Entity\YourEntity.php … /** * @ORM\Column(type="string", length=255, nullable=true) */ protected $originalImage; …
我将很快提供演示…
画廊小部件
在表单中使用小部件（与SonataAdmin一起使用）以创建存储在数组类型字段中的图像的 可排序 列表（所以是一个画廊：）
->add('gallery', CroppableGalleryType::class, array( //same parameters as comur_image ))
并为存储图像创建一个数组类型字段。Doctrine（或其他ORM）将此字段序列化以将其作为字符串存储在数据库中。
// YourBundle\Entity\YourEntity.php ... /** * @ORM\Column(type="array", nullable=true) */ protected $gallery; ...
并在您的实体中创建函数以获得目录路径，例如
/* DEPRECATED, Use upload dir public function getUploadRootDir() { // absolute path to your directory where images must be saved return __DIR__.'/../../../../../web/'.$this->getUploadDir(); }*/ public function getUploadDir() { return 'uploads/myentity'; } public function getWebPath() { return null === $this->image ? null : '/'.$this->getUploadDir().'/'.$this->image; }
就是这样！当您在表单中使用它时，将创建类似于以下图像的控件。 您也可以重新排序它们，因为PHP序列化数组是有序的
画廊图像将存储在uploadDir / gallery_dir（默认为gallery）。裁剪图像将存储在uploadDir / gallery_dir / cropped_dir（与图像小部件相同）和缩略图在uploadDir / gallery_dir / cropped_dir / thumb_dir，具有指定的宽度。所以如果您将
uploadConfig
uploadRoute（可选）
调用路由以发送上传的文件。除非你确切知道自己在做什么，否则建议不要更改此参数。
默认值：comur_api_upload
uploadDir（必需）
自2.0.3版起
替换了已删除的uploadUrl，因为存在安全问题（参见#80）
公共目录相对路径，指向放置上传图像的目录。我建议你在实体中创建一个函数，并像示例中那样调用它
/* DEPRECATED, Use upload dir public function getUploadRootDir() { // absolute path to your directory where images must be saved return __DIR__.'/../../../../../web/'.$this->getUploadDir(); }*/ public function getUploadDir() { return 'uploads/myentity'; } public function getWebPath() { return null === $this->image ? null : '/'.$this->getUploadDir().'/'.$this->image; }
webDir（必需）
用于在模板中显示图像的URL，必须是相对URL。如果你在uploadDir部分中创建了相关函数，则可以使用getWebPath()函数作为webDir参数。
fileExt（可选）
允许的图像扩展名。
默认值：‘.jpg; .gif; .png; .jpeg’
maxFileSize（可选）
允许的最大图像重量（MB）。
默认值：50（50MB）
libraryDir（可选）
用于在图像库中显示图像的目录。
默认值：uploadDir
libraryRoute（可选）
用于在库中显示图像的路由。如果你不知道它具体做什么，建议不要更改此参数。
默认值：comur_api_image_library
showLibrary（可选）
如果你想用户看不到libraryDir中现有的图像，则将此设置为false。
默认值：true
saveOriginal（可选）
如果你想保存原始文件的路径（例如，在灯箱中显示大图像），请使用此参数。你必须放入实体属性名，然后捆绑包将使用它来保存原始文件路径。
注意：此参数对于图库等已被禁用。它将很快实现。
默认值：false
generateFilename（可选）
此参数用于生成一个唯一文件名。设置为false，它将保持原始文件名。
默认值：true
cropConfig
disable（可选）
自2.0.4版起
禁用裁剪功能并直接保存原始图像
默认值：false
minWidth（可选）
所需图像的最小宽度。
默认值 1
minHeight（可选）
所需图像的最小高度。
默认值 1
aspectRatio（可选）
裁剪屏幕的宽高比。
默认值：true
cropRoute（可选）
裁剪操作的路由。如果你不知道它具体做什么，建议不要更改此参数。
默认值：comur_api_crop
forceResize（可选）
如果为true，系统将调整图像大小以适合minWidth和minHeight。默认值：false
thumbs（可选）
自动创建缩略图的数组。系统将调整图像大小以适应maxWidth和maxHeight。它将它们放在“uploadDir/cropped_images_dir/thumbs_dir/widthxheight-originalfilename.extension”中，因此你可以使用包含的Thumb Twig扩展来获取它们，例如
{# your_themplate.html.twig #} <img src="{{ entity.imagePath|thumb(45, 56) }}"
新功能0.2.2：你可以使用‘useAsFieldImage’选项使用此缩略图作为图像字段预览（在你的表单中，你将看到此缩略图而不是原始裁剪图像）。这对于你有大裁剪图像非常有用。
安全
请阅读以下关于上传最佳实践的文档：https://github.com/blueimp/jQuery-File-Upload/blob/master/SECURITY.md
待办事项列表
- 创建测试
- 在代码中添加更多注释
- 考虑移除图像删除（目前图像不会被删除，你必须自己处理…）
- 在图像上传后动态更新现有图像列表
- 添加javascript事件（进行中）