搜索comur / image-bundle
提供使用 jquery upload 上传和 jcrop 裁剪图片字段的 symfony2 扩展包
Requires
- php: >=7.1.3
- ext-gd: *
- friendsofsymfony/jsrouting-bundle: @stable
- jms/translation-bundle: ^1.2.2
- symfony/config: ~3.4 || ~4.2
- symfony/form: ~3.4 || ~4.2
- symfony/http-foundation: ~3.4 || ~4.2
- symfony/routing: ~3.4 || ~4.2
- symfony/twig-bridge: ~3.4 || ~4.2
- symfony/validator: ~3.4 || ~4.2
- twig/extra-bundle: @stable
- twig/twig: ~2.5 || ~3.0
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，我会合并它。
⚠️ 仅当使用 imagick 时才支持动画 gif 裁剪
变更日志
请参阅 CHANGELOG.md
屏幕截图
以下是一些屏幕截图，因为我还没有时间制作演示
简单图片小部件
相册小部件
上传图片界面
从图库中选择图片界面
裁剪图片界面
更改相册图片顺序界面
依赖关系
扩展包在 assets 中使用以下包（参见 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], ];
步骤 3：创建路由文件
两个扩展包提供路由，必须创建这些文件才能启用它们
# config/routes/fos_js_routing.yaml fos_js_routing: resource: "@FOSJsRoutingBundle/Resources/config/routing/routing-sf4.xml"
# config/routes/comur_image.yaml comur_image: resource: "@ComurImageBundle/Resources/config/routing.yml" prefix: /
不使用 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: /
第4步：在布局的body标签之后添加Modal模板
<body> {% include "ComurImage/Form/croppable_image_modal.html.twig"%} … </body>
注意：该模板包含许多脚本和样式，包括jQuery和Bootstrap。您可以使用以下参数避免包含jQuery和/或Bootstrap
{% include "ComurImage/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' translation_domain: 'ComurImageBundle' gallery_thumb_size: 150 gallery_dir: 'gallery'
cropped_image_dir
用于确定放置裁剪图像的相对目录名称（见上文）。
默认值： 'cropped'
thumbs_dir
用于确定放置缩略图的相对目录名称（见上文）。
默认值： 'thumbnails'
media_lib_thumb_size
用于确定媒体库中使用的像素（方形）缩略图大小。
默认值 150
public_dir
您的公共目录路径。用于检查缩略图在缩略图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 ))
创建一个数组类型字段以存储图像
// 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事件（进行中）