README

使用分支1.3以兼容Symfony 3

使用0.X版本以兼容bootstrap 2.x。

bootstrap 2.X的兼容性不再维护

ComurImageBundle

Symfony2的图片上传/裁剪捆绑包

这个捆绑包可以帮助你轻松在表单中创建图片上传/裁剪字段。你不需要使用任何类型的生成器或其他要求。它使用bootstrap使其看起来很好，但你也可以使用任何其他CSS来自定义它。

它使用美丽的Jquery File Upload来上传文件（原始UploadHandler已被修改以添加命名空间和新的配置参数以生成随机文件名）以及JCrop来让你裁剪上传的图片。

自版本0.2.3以来新增！你还可以将原始文件保存在单独的字段中 请参阅下面的saveOriginal参数。

自版本0.2.0以来新增！你还可以创建可排序和可裁剪的画廊小部件，无需任何特定配置。它只需要在你的实体中一个类型属性（以及数据库中的文本列）。以下为示例、截图和使用方法。

屏幕截图

以下是屏幕截图，因为我还没有时间放置一个演示

###简单图片小部件###

###画廊小部件###

###上传图片屏幕###

###从图库中选择图片屏幕###

###裁剪图片屏幕###

###更改画廊图片顺序屏幕###

安装

将此捆绑包添加到你的项目中的composer.json

{
    "require": {
        "comur/image-bundle": "1.0.*@dev",
    }
}

将FOSJsRouting和此捆绑包注册到你的app/AppKernel.php

// app/AppKernel.php
public function registerBundles()
{
    return array(
        // ...
        new FOS\JsRoutingBundle\FOSJsRoutingBundle(),
        new JMS\TranslationBundle\JMSTranslationBundle(),
        new Comur\ImageBundle\ComurImageBundle(),
        // ...
    );
}

将此路由添加到你的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:   /

将Modal模板添加到你的布局body标签之后

<body>
{% include "ComurImageBundle:Form:croppable_image_modal.html.twig"%}
…
</body>

注意：此模板包括许多脚本和样式，包括jquery和bootstrap。你可以使用以下参数来避免包括jquery和/或bootstrap

{% include "ComurImageBundle:Form:croppable_image_modal.html.twig" with {'include_jquery': false, 'include_bootstrap': false} %}

不要忘记将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
		web_dirname: 'web'
		translation_domain: 'ComurImageBundle'
		gallery_thumb_size: 150
		gallery_dir: 'gallery'

###cropped_image_dir###

它用于确定放置裁剪图片的相对目录名称（见上文）。

默认值： 'cropped'

###thumbs_dir###

它用于确定放置缩略图的相对目录名称（见上文）。

默认值： 'thumbnails'

###media_lib_thumb_size###

它用于确定媒体库中缩略图的像素大小（正方形）。

默认值 150

###upload_dir###

你的公共目录的目录名。它用于在thumb twig助手中检查缩略图的存在。

默认值： 'web'

###translation_domain###

翻译域名。例如，提供了两种语言（en & fr）。要覆盖域名，请将此参数更改为你想要的任何内容。

默认值： 'ComurImageBundle'

###gallery_thumb_size###

这是你希望在画廊小部件中显示的图片像素大小。画廊小部件将自动创建具有此大小的正方形缩略图，并在画廊小部件中显示它们。

默认值 150

###gallery_dir###

这是相册目录的名称。小部件将在根目录下您添加小部件到表单时提供的特定目录中存储所有相册图片。

例如。如果您在添加小部件时将 'uploads/images' 作为 webDir，相册图片将存储在 'uploads/images/[gallery_dir]' 中。这样添加是为了使相册使用更加方便，您不需要为实体添加新函数来获取相册目录。

##用法##

此组件提供了两个小部件。它们具有完全相同的配置参数。

图片小部件

在您的表单中使用小部件（与 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
            'uploadUrl' => $myEntity->getUploadRootDir(),       // 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
            'libraryDir' => null, 						//optional
            'libraryRoute' => 'comur_api_image_library', //optional
            'showLibrary' => true, 						//optional
            'saveOriginal' => 'originalImage'			//optional
        ),
        'cropConfig' => array(
            '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;

…

并在您的实体中创建函数以获取目录路径，例如

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 getAbsolutePath()
{
    return null === $this->image ? null : $this->getUploadRootDir().'/'.$this->image;
}

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;

…

并在您的实体中创建函数以获取目录路径，例如

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 getAbsolutePath()
{
    return null === $this->image ? null : $this->getUploadRootDir().'/'.$this->image;
}

public function getWebPath()
{
    return null === $this->image ? null : '/'.$this->getUploadDir().'/'.$this->image;
}

这就完成了！当您在表单中使用它时，将创建一个类似以下图片的小部件。 您也可以重新排序它们，因为 PHP 序列化数组是有序的

相册图片将存储在 uploadUrl / gallery_dir（默认为 gallery）。裁剪后的图片将存储在 uploadUrl / gallery_dir / cropped_dir（与图片小部件相同）和缩略图在 uploadUrl / gallery_dir / cropped_dir / thumb_dir，具有指定的宽度。所以如果您的

##uploadConfig##

###uploadRoute（可选）###

用于发送上传文件的调用路由。建议除非您确切知道您在做什么，否则不要更改此参数。

默认值： comur_api_upload

###uploadUrl（必需）###

放置上传图片的目录的绝对 URL。我建议您在实体中创建一个函数并像示例中那样调用它

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 getAbsolutePath()
{
    return null === $this->image ? null : $this->getUploadRootDir().'/'.$this->image;
}

public function getWebPath()
{
    return null === $this->image ? null : '/'.$this->getUploadDir().'/'.$this->image;
}

###webDir（必需）###

用于在模板中显示图片的 URL，必须是相对 URL。如果您创建了与 uploadUrl 部分中说明的相关函数，则可以对于 webDir 参数使用 getWebPath() 函数。

###fileExt（可选）###

允许的图片扩展名。

默认值： '.jpg;.gif;.png;.jpeg'

###libraryDir（可选）###

查找要显示在图片库中的图片的目录。

默认值： uploadUrl

###libraryRoute（可选）###

用于获取要在库中显示的图片的调用路由。如果您不知道它具体做什么，建议您不要更改此参数。

默认值： comur_api_image_library

###showLibrary（可选）###

如果您不希望用户看到 libraryDir 中的现有图片，请将此设置为 false。

默认值： true

###saveOriginal（可选）###

如果您想保存原始文件的路径（例如，在灯箱中显示大图片），请使用此参数。您必须放置实体的属性名称，并且该组件将使用它来保存原始文件路径。

注意：此参数对相册等实例已禁用。它将很快实现。

默认值： false

##cropConfig##

###minWidth（可选）###

所需图片的最小宽度。

默认值 1

###minHeight（可选）###

所需图片的最小高度。

默认值： 1 ###aspectRatio (可选)###

使裁剪屏幕符合长宽比。

默认值： true

###cropRoute (可选)###

裁剪操作的路径。如果您不确定这个参数的作用，建议不要更改此参数。

默认值： comur_api_crop

###forceResize (可选)###

如果为真，系统将调整图像大小以适应 minWidth 和 minHeight。

###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' 选项使用此缩略图作为图像字段的预览（在您的表单中，您将看到此缩略图而不是原始裁剪图像）。当您有较大的裁剪图像时很有用。

#待办事项列表#

创建测试
在代码中添加更多注释
考虑移除图像删除（目前图像不会被删除，您必须自己处理...）
在图像上传后动态更新现有图像列表

img / image-bundle

维护者

详细信息