README

您需要为了艺术指导目的裁剪图像吗？

也许这是响应式设计的需要，或者您厌倦了在SilverStripe中使用《CroppedResize》、《PaddedResize》、《Square》以及基于中心裁剪的功能，这些功能并不能完全满足您的图像裁剪需求。

也许《CropperField》正是您所需要的。虽然它被称为《CropperField》，但这只是用户界面。在幕后，一个干净且可扩展的架构允许您裁剪几乎任何内容——外部URL、文档、视频帧等。

对于该字段本身，前端由Cropper v0.7.5提供，由Fengyuan Chen开发。

警告：处于开发/alpha阶段。除非您准备贡献力量，否则请勿使用！

安装

1. composer require willmorgan/silverstripe-cropperfield
2. 指定版本约束。

• 虽然此模块正在积极开发中，您可能想要使用~0.X或类似版本。

截图

在CMS设置中，字段目前看起来是这样的。

用法

1. 在应拥有裁剪图像的对象上指定$has_one Image关系。
2. 指定一个基于图像的UploadField，您希望对其裁剪的图像。

• 目前仅支持UploadField。非图像内容会导致错误。抱歉。

1. 创建一个AdapterInterface实现器并将其传递到您的CropperField中

• 参见[1]；适配器足够通用，您可以为任何内容提供支持——只要有一个作为其后盾的File对象（无论它是否存在）。

1. 如果您愿意，设置一些选项。
2. 祝您裁剪愉快。

示例

在此示例中，已设置如下配置

$has_one = array(
	'MyBigPhoto' => 'Image',
	'MyArtDirectionCrop' => 'Image',
);

在getCMSFields调用内部，或类似调用

$uploadField = new UploadField('MyBigPhoto', 'Big Photo Uploader');
$cropperField = new CropperField\CropperField(
	'MyArtDirectionCrop',
	'Cropped Image',
	new CropperField\Adapter\UploadField(
		$uploadField
	)
);

您现在可以在模板中使用$MyArtDirectionCrop，就像使用任何其他图像一样（例如，您可以使用$ResizeRatio、$Square等）

初始优势是CMS用户可以指定高分辨率图像的真实焦点，您/您的前端团队能够重新使用这个基础的裁剪图像以实现响应式设计，无论是使用srcset、picture + source等。

选项

您可以在CropperField上设置这些选项，以对CMS用户的操作进行一些控制。

提供的适配器

• CropperField\Adapter\UploadField 用于基于图像的上传字段

提供的裁剪器

• CropperField\Cropper\GD 用于 GD 安装
• Imagick 即将推出

自定义

• 模板：您可以通过覆盖 CropperField.ss 来轻松自定义使用的模板
• 您可以编写自己的裁剪器（例如，为 Imagick）。
  1. 实现 CropperInterface
  2. 可以使用 CropperField->setCropper() 在每个实例的基础上设置它
  3. 在 YML 中设置它，覆盖 CropperFactory.cropper。工厂使用 Injector 进行依赖注入。

兼容性

• Cropper 可以支持到 IE8 这样古老的浏览器，但 CropperField CMS UI 仅在 Chrome 中进行了测试。

类似模块

如果这不适合您，请查看一些替代方案

• @jonom 开发了 silverstripe-focuspoint，它由他流行的 jQuery FocusPoint 库 驱动

* 作为旁注，我会很感激您花时间告诉我原因

许可

• SilverStripe CropperField 采用 BSD 许可证发布；然而，请注意
• Cropper v0.7.5 采用 MIT 许可证发布。

由

Will Morgan 构建，他可供雇佣。