README

此包是 ComurImageBundle 的分支，目前仅支持 Symfony3，并且维护是有限度的。

来自分支存储库的 Readme。

使用 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"
	
image:
    resource: "@ComurImageBundle/Resources/config/routing.yml"
    prefix:   /

将模态模板添加到您布局的 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>

就这样！

配置

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

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' => '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' => 'api_image_library', //optional
            'showLibrary' => true, 						//optional
            'saveOriginal' => 'originalImage',			//optional
            'generateFilename' => true			//optional
        ),
        'cropConfig' => array(
            'minWidth' => 588,
            'minHeight' => 300,
            'aspectRatio' => true, 				//optional
            'cropRoute' => '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 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（可选）###

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

默认值： 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 部分所述的相关函数，则可以使用 getWebPath() 函数作为 webDir 参数。

###fileExt（可选）###

允许的图片扩展名。

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

###libraryDir（可选）###

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

默认值： uploadUrl

###libraryRoute（可选）###

用于获取在库中显示的图片的调用路由。除非你确切地知道它在做什么，否则建议不要更改此参数。

默认值： api_image_library

###showLibrary（可选）###

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

默认值： true

###saveOriginal（可选）###

如果你想保存原始文件的路径（例如，在灯箱中显示大图片），请使用此参数。你必须提供实体属性名称，并使用该名称将原始文件路径保存在其中。

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

默认值： false

###generateFilename（可选）###

此参数用于生成一个唯一的文件名。设置为 false，它将保留原始文件名。

默认值： true

##cropConfig##

###minWidth（可选）###

所需图片的最小宽度。

默认值 1

###minHeight（可选）###

所需图片的最小高度。

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

设置为裁剪屏幕的真实比例。

默认值： true

###cropRoute（可选）###

到裁剪操作的路线。如果您不确定该参数的具体作用，请勿更改此参数。

默认值： api_crop

###forceResize（可选）###

如果为true，系统将调整图片大小以适应 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' 选项将此缩略图用作图像字段的预览（在您的表单中，您将看到此缩略图而不是原始裁剪图像）。这对于您有大型裁剪图像时非常有用。

#待办事项列表#

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

codeneuss / image-bundle

维护者

详细信息

README

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

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

ComurImageBundle

屏幕截图

安装

配置

图片小部件

相册小部件