裁剪图像而不是使用 Plone 和 Archetypes 缩放

Question

我们希望裁剪图像而不是缩放（Archetypes ImageField），以便左上角（或任何角）以给定的比例自动显示。

我在 Plone 中有哪些选项/附加组件？

Answer 1

您可能对新插件plone.app.imagecropping 感兴趣。它基于 ggozad 的 plone.app.imaging 分支，并且由于 plone FTW 决定而被排除在外（参见 plip #10174）。目前还没有可用的版本，但这将在不久的将来发生变化。

Answer 2

我不知道有什么插件可以实现这一点；所以我会回答：你必须开发它。

Answer 3

在服务器端裁剪图像然后维护图像的 blob 副本太痛苦了。

相反，只需使用 Archetypes 验证器设置文件上传限制，以保持文件合理的小：

http://collective-docs.readthedocs.org/en/latest/content/archetypes/files.html#setting-max-file-size-to-filefield-and-imagefield

然后使用 CSS 裁剪图像。

左上角裁剪的相关css：

.product-listing .info-box .main-image-wrapper {
    display: block;
    background: white;
    border: 1px solid #eee;
    width: 280;
    height: 205px;
    padding: 10px;

    margin-bottom: 30px;
    box-shadow: 0 0 3px #aaa, 0 5px 3px #aaa;

    transition: background 0.5s, box-shadow 0.5s;
    -moz-transition: background 0.5s, box-shadow 0.5s; /* Firefox 4 */
    -webkit-transition: background 0.5s, box-shadow 0.5s; /* Safari and Chrome */
    -o-transition: background 0.5s, box-shadow 0.5s; /* Opera */
}

.product-listing .info-box .main-image-container {
    display: block;
    width: 280px;
    height: 205px;
    background: transparent no-repeat top left;
}

.product-listing .info-box .main-image-wrapper:hover {
    background: #eee;
    box-shadow: 0 0 3px #aaa, 0 6px 5px #666;
}

相关TAL：

<a class="main-image-wrapper" tal:attributes="href python:view.getTargetLink(context)" tal:condition="python:getattr(product.aq_base, 'image', None) != None">
    <div class="main-image-container"
         tal:attributes="style string:background-image:url(${context/absolute_url}/@@images/image)"
         class="main-image">

         <!-- -->

    </div>

</a>

Answer 4

不久前，作为 p.a.imaging 的一个分支，我开始为一个客户做这件事。它从未集成，但希望您几乎可以按原样使用它：

https://github.com/plone/plone.app.imaging/tree/ggozad-cropping