README

与bootstrap 3.X的兼容性

KemImageBundle

用于Symfony2的图片上传/裁剪打包工具

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

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

您还可以将原始文件保存在单独的字段中**请参阅下面的saveOriginal参数。

您还可以创建可排序和可裁剪的相册小部件**无需任何特定配置。只需要在实体中一个数组类型的属性（以及数据库中的一个文本列）。下面有示例、截图和使用说明。

屏幕截图

这里有一些屏幕截图，因为我还没有时间上传演示。

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

###相册小部件###

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

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

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

###更改相册图片顺序屏幕###

安装

将此打包工具添加到项目的composer.json中

{
    "require": {
        "kem/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 Kem\ImageBundle\KemImageBundle(),
        // ...
    );
}

将此路由添加到您的routing.yml中

# app/config/routing.yml
fos_js_routing:
	resource: "@FOSJsRoutingBundle/Resources/config/routing/routing.xml"
	
kem_image:
    resource: "@KemImageBundle/Resources/config/routing.yml"
    prefix:   /

在布局body标签之后添加Modal模板

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

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

{% include "KemImageBundle: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>

就这样！

配置

**所有参数都是可选的：**

kem_image:
	config:
		cropped_image_dir: 'cropped'
		thumbs_dir: 'thumbnails'
		media_lib_thumb_size: 150
		web_dirname: 'web'
		translation_domain: 'KemImageBundle'
		gallery_thumb_size: 150
		gallery_dir: 'gallery'

###cropped_image_dir###

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

默认值： 'cropped'

###thumbs_dir###

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

默认值： 'thumbnails'

###media_lib_thumb_size###

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

默认值 150

###upload_dir###

您的公共目录的目录名。它用于检查缩略图存在性在缩略图twig辅助函数中。

默认值： 'web'

###translation_domain###

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

默认值： 'KemImageBundle'

###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', 'kem_image', array(
        'uploadConfig' => array(
            'uploadRoute' => 'kem_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' => 'kem_api_image_library', //optional
            'showLibrary' => true, 						//optional
            'saveOriginal' => 'originalImage'			//optional
        ),
        'cropConfig' => array(
            'minWidth' => 588,
            'minHeight' => 300,
            'aspectRatio' => true, 				//optional
            'cropRoute' => 'kem_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', 'kem_gallery', array(
	//same parameters as kem_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;
}

就这样！当你将其用于表单时，将创建一个如下图的 widget。 由于 PHP 序列化数组是有序的，因此你可以重新排序它们

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

##uploadConfig##

###uploadRoute（可选）###

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

默认值： kem_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（可选）###

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

默认值： kem_api_image_library

###showLibrary（可选）###

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

默认值： true

###saveOriginal（可选）###

如果你想保存原始文件的路径（例如，在灯箱中显示大图片），请使用此参数。你必须指定你的实体属性名称，该捆绑包将使用它来保存原始文件路径。

注意： 对于相册等，此参数已被禁用。它将很快得到实现。

默认值： false

##cropConfig##

###minWidth（可选）###

所需图片的最小宽度。

默认值 1

###minHeight（可选）###

所需图片的最小高度。

默认值： 1 ###aspectRatio（可选）###

为裁剪屏幕的真比例。

默认值： true

###cropRoute（可选）###

裁剪操作的路线。如果你不知道它具体做什么，建议不要更改此参数。

默认值： kem_api_crop

###forceResize（可选）###

如果为真，系统将调整图片大小以适应最小宽度和最小高度。

###缩略图（可选）###

自动创建缩略图的数组。系统将调整图片大小以适应最大宽度和最大高度。它将它们放入 "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' 选项将此缩略图用作图像字段的预览（在您的表单中，您将看到此缩略图而不是原始裁剪后的图片）。当您有较大裁剪图片时非常有用。

#待办事项列表#

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

kem / image-bundle

维护者

详细信息