Thumbor // 裁剪和 "zoom"

Question

我对 thumbor 还很陌生，但我想知道是否可以使用我还不知道的特定选项，"zoom in" 一张图片。

下面的简单示例：

据我所知，这可能意味着调整到特定区域。但是我缺乏找到正确选项的经验（如果拇指可以做到这一点）

Answer 1

根据this，您应该可以放大图像，然后对其进行手动裁剪。

所以像这样：

http://thumbor-server/PointX1xPointY1:PointX2xPointY2/800X600/http://example.com/upload/koala.jpg

Answer 2

我一直在研究这个线程中的另一个，但一直被完全阻止，直到我意识到它不太准确。您不调整图像大小并执行手动裁剪。公平地说，thumbors 文档也可以更清楚地说明如何执行此操作。

通过反复试验，我发现必须从未缩放的图像确定左上角和右下角所需的裁剪点，并且它们都必须从图像的绝对左上角开始测量未缩放的图像。此外，没有要计算的 scale/zoom 值——只有最终大小的输出才算数。下面是一个示例用例来解释

我们有一张 1000 x 2000 的图像 url
我们想要 30x30 的最终输出
我们想要的裁剪是一个 200 x 200 的部分
我们想要的裁剪从左侧 81px 和顶部 93px 开始

结果为

裁剪 81x93 的左侧和顶部（从未缩放的左上角开始测量）
裁剪 281x293 的右侧和底部（从未缩放的左上角开始测量）
最终输出为 30x30

您的 url 操作字符串参数将是

81x93:281x293/30x30/

请注意，除非您按照文档处于不安全模式，否则在生成 url 后，您不能随意操作 url 值，因为 url 中的哈希值是由上面的操作字符串 + 原始 url 制成，并用拇指或键加盐。请注意 / 包含在上面操作字符串的末尾。此哈希码取自 here

import crypto from 'crypto-js';
var key = crypto.HmacSHA1(operation + imagePath, thumborKey);
key = crypto.enc.Base64.stringify(key);
key = key.replace(/\+/g, '-').replace(/\//g, '_');

新的URL如下。请注意 / 包含在上述操作字符串的末尾

var newURL =  
thumborServerUrl + '/' + 
key + '/' + 
operation + imagePath;

// https://imgs.mysite.com/ajs3kdlfog7prjcme9idgs/81x93:281x293/30x30/https%3A%2F%2Fmysite.s3.amazonaws.com%2Fuser%2Fmy-image.jpg

Thumbor // 裁剪和 "zoom"

Thumbor // crop and "zoom"

crop

thumbnails

image-resizing

thumbor