README

包含对受保护图像资产支持的Thumbor Silverstripe 4图像

此模块将图像缩略图生成推送到一个Thumbor开源图像服务器。

由Thumbor生成的图像绕过Silverstripe提供的标准Intervention后端，而是由Thumbor服务器生成和提供。原始图像上传并存储在Silverstripe安装的标准资产位置。

SilverStripe 3兼容版本 - v0.1

SilverStripe 4的后续版本将被标记为v0.2及以上。

这是一个新模块，目前被认为是预发布版本

什么是Thumbor？

来自Thumbor网站本身

Thumbor是一个智能图像服务。它允许按需裁剪、调整大小和翻转图像。它具有非常智能的图像重要点的检测，用于更好的裁剪和调整大小，使用最先进的面和特征检测算法

Thumbor是用Python编写的，可以通过PIP轻松安装，并使用标准配置文件进行配置。

为什么我应该使用它？

Thumbor减轻了SilverStripe网站的负担。您的网络堆栈正在忙碌地处理请求，不应该按需调整图像大小。

使用此模块，用户可以通过通常的Silverstripe上传过程（例如FileField，UploadField）上传图像，然后系统通过特定URL将调整大小和裁剪任务转交给Thumbor。

Thumbor服务器可以存在于任何地方，只要Thumbor生成的图像的URL指向它，并且Thumbor服务器可以访问源图像。您可以有多个Thumbor服务器，每个服务器都有多个上游，都处理请求。

其他优点

Thumbor支持使用format过滤器输出webp格式
对单个图像应用多个过滤器
为生成的缩略图应用缓存生存时间
使用多种后端存储生成的图像（例如Redis，Mongo，S3）或实现自己的后端。
在Thumbor图像服务器前放置前端缓存。
与Pagespeed兼容

Thumbor URL看起来像什么？

https://thumbor.readthedocs.io/en/latest/usage.html

http(s)://*thumbor-server*/hmac/trim/AxB:CxD/fit-in/-Ex-F/HALIGN/VALIGN/smart/filters:FILTERNAME(ARGUMENT):FILTERNAME(ARGUMENT)/*image-uri*

在哪里

http(s) - 没有理由不使用https
thumbor-server - 您的Thumbor服务器主机名
hmac - 请求签名，这样您的磁盘就不会被 thumbs 填满！
trim - 删除周围的空间
AxB:CxD 表示手动裁剪图像在左上角AxB和右下角CxD处；
fit-in 表示生成的图像不应自动裁剪，否则仅适应由ExF指定的虚拟框；
-Ex-F 表示将图像调整大小为ExF宽度和高度大小。负号表示水平和垂直翻转；
HALIGN 是裁剪的水平对齐；
VALIGN 是裁剪的垂直对齐；
smart 表示使用智能焦点检测；
可以在返回之前按顺序将过滤器应用于图像；
image-uri 是您想要调整大小的图像的公共URI。

受保护资产的签名URL

请参阅受保护资产

模板中的图像处理

以下标准图像处理方法可供模板中使用

ScaleWidth
ScaleHeight
Fill
Pad
Fit
ResizedImage
CMSThumbnail, AssetLibraryThumbnail, AssetLibraryPreview, StripThumbnail

请注意，此模块中的ResizedImage保留纵横比。

该模块还在模板中提供了一些额外的图像处理方法

FlipVertical - 垂直翻转原始图像，例如 $Image.FlipVertical
FlipHorizontal - 水平翻转原始图像，例如 $Image.FlipHorizontal
ScaleWidthFlipVertical - 通过宽度缩放图像并垂直翻转，例如 $Image.ScaleWidthFlipVertical(360)
ScaleWidthFlipHorizontal - 通过宽度缩放图像并水平翻转，例如 $Image.ScaleWidthFlipHorizontal(360)
ScaleHeightFlipVertical - 通过高度缩放图像并垂直翻转，例如 $Image.ScaleHeightFlipVertical(360)
ScaleHeightFlipHorizontal - 通过高度缩放图像并水平翻转，例如 $Image.ScaleHeightFlipHorizontal(360)
ManualCropFromCorners - 从角落手动裁剪图像，例如 $Image.ManualCropFromCorners(left px, top px, right px, bottom px)
Focal - 围绕焦点裁剪图像，例如 $Image.Focal(left px, top px, right px, bottom px)
CroppedFocus - 基于存储的裁剪数据在焦点上裁剪图像，例如 $Image.CroppedFocus
ManualCrop - 将图像裁剪到裁剪工具返回的确切尺寸

通过Filter方法提供过滤器，可以串联使用，例如以下模板代码

$Image.Filter('brightness', 20).Filter('saturation', 3).Filter('sharpen', 8).ScaleWidth(360)

... 将提高亮度20%，增加饱和度3%，以8的量锐化，然后缩放图像到360像素宽度。图像将在网络浏览器/客户端请求URL时生成。

过滤器非常强大，完整的列表可在此处找到。要在模板中使用过滤器，请使用与相关Thumbor过滤器页面中描述的相同顺序的参数。

示例

对于锐化，将$Image.Filter('sharpen', 7, 1, true)添加到模板中将在图像上显示锐化版本，其中sharpen_amount=7，sharpen_radius=1，并且仅启用亮度通道的锐化。

注意事项

重新启动过滤器。

当您在模板中多次处理同一图像时，您需要重置图像上的过滤器

比较

$TestImage.Restart().Pad(500,300, 'fc0')
$TestImage.Restart().Align('left','top').Fill(160,160)

与

$TestImage.Pad(500,300, 'fc0')
// this version will retain the Pad filter
$TestImage.Align('left','top').Fill(160,160)

需要额外命令的过滤器

某些过滤器需要其他过滤器返回相关的图像URL。通过在模板中调用Original返回当前过滤器实例。这仅适用于不返回Thumbor图像URL的特定过滤器操作。

// This will return the original image
$TestImage.ManualCrop
// This will return a Thumbor URL - manually cropped image to 600px width
$TestImage.ManualCrop.ScaleWidth(600)
// This will return the manually cropped Thumbor image URL
$TestImage.ManualCrop.Original

配置Thumbor服务器

请在此处查看模块文档

Silverstripe配置

该模块附带用于通过Thumbor处理图像的配置已关闭。这允许您通过删除项目配置切换回默认的Silverstripe图像处理。

如果您查看模块Yaml配置，其中包含许多配置选项已注释，请将这些选项用于您自己的项目配置。要使用该模块，请在您的项目Yaml中创建配置，基于模块配置

以下示例配置显示了一个基本设置。您必须在启用配置之前运行Thumbor服务器。

---
Name: local_thumbor_config
After:
  - '#thumbor_config'
---
# Example config for creating images
Codem\Thumbor\Config:
  # from /etc/thumbor/thumbor.conf (MY_SECURE_KEY is the default, you shouldn't use this)
  thumbor_generation_key: 'xxxxxx'
  # for signing tokens for protected images, make it complex
  signing_key: 'xxx'
  salt: 'a salt'
  use_https : false
  # protected image expiry time (s)
  expiry_time: 2
  # if serving off a directory
  backend_path : ''
  # list all backends you have configured here, as many as you want, the module will pick one at random
  backends:
    - 'img1.cdn.example.com'
    - 'img2.cdn.example.com'
    - 'img3.cdn.example.com'
  protected_backends:
    - 'protected.example.com'
---
Name: local_thumbor_injection
After:
  - '#thumbor_injection'
---
SilverStripe\Core\Injector\Injector:
  SilverStripe\Assets\Image:
    class: 'Codem\Thumbor\Image'
  SilverStripe\Assets\Image_Backend:
    class: Codem\Thumbor\ThumbyllaImageBackend
  SilverStripe\AssetAdmin\Model\ThumbnailGenerator.graphql:
    class: Codem\Thumbor\ThumbnailGenerator
  SilverStripe\AssetAdmin\Model\ThumbnailGenerator.assetadmin:
    class: Codem\Thumbor\ThumbnailGenerator
  SilverStripe\Assets\Storage\AssetStore:
    class: Codem\Thumbor\ThumbyllaAssetStore
---
Name: local_thumbor_mapping_config
After:
  - '#thumbor_mapping_config'
---
# reset image handling classes
SilverStripe\Assets\File:
  class_for_file_extension:
    'jpg': 'Codem\Thumbor\Image'
    'jpeg': 'Codem\Thumbor\Image'
    'gif': 'Codem\Thumbor\Image'
    'png': 'Codem\Thumbor\Image'
    'webp': 'Codem\Thumbor\Image'

文档

文档会定期更新

已知问题 + 问题跟踪

请使用Github问题跟踪器提问/报告bug。

库 + 构建

此模块使用了cropperjs和react-cropper进行图像裁剪和焦点处理。

所有必需的资产都在client/dist/js|styles目录中。如果你想要自己构建，你需要安装Node和Yarn，然后

$ cd vendor\codem\thumbylla
$ yarn install

你可以运行yarn run build或yarn run watch，例如。

许可

请参阅LICENCE

codem / thumbylla

维护者

详细信息