是否可以使用imageresizer.net对图像进行任意仿射变换？

Question

我想使用ImageResizer.net进行复杂的平移/缩放/缩放操作：

这是一种纯CSS方式来裁剪/平移/缩放图像：

<div style="width: 300px; height: 100px; overflow:hidden;"> <img height="200" style="position:relative; top: -50px; left: 5px" src="http://placehold.it/250x250"/> </div>​

（参见：http://jsfiddle.net/tbmBt/18/获取此示例）

虽然这在大多数现代浏览器中运行良好，但在某些电子邮件客户端（可能还有较旧的浏览器）中它很脆弱，很容易破碎。

所以......一旦用户用电子邮件（或旧浏览器）的某些HTML“完成”，我想拉出所有这些CSS属性并制作一个将所有这些都考虑在内的图像，从而产生一个新的正确尺寸的图像...

我基本上已经解决了这个问题：

1. 将源图像缩放到正确的尺寸（基于“高度”） IMG标签的属性）
2. 根据图像偏移和div裁剪图像 容器尺寸。
3. 根据裁剪的图像尺寸和图像填充图像 容器尺寸。 （如果不需要填充，请使用95％的JPEG 质量，当需要填充时，使用PNG，bgcolor透明）。

这很好用，但我更喜欢使用URL API，只需要处理一次图像而不是“三次”。

我相信我可以使用仿射变换一步到位。在这一点上，我认为这将需要一个新的自定义插件（如果这是实现我所追求的唯一方法，我甚至可以自己实现它并开源它......）。

有关更有效的方法来做我想做的事情吗？

Answer 1

是的，可以通过URL API进行任意仿射变换，但您必须知道order of events ，并且必须将裁剪和填充拆分为单独的命令。

在调整大小之前进行裁剪，因此您需要找出视口尺寸并将它们分成两组坐标。

1）源图像坐标中的裁剪值为x1，y1，x2，y2。如果您不知道图像尺寸中的视口坐标，则可以使用cropxunits=100和cropyunits=100分别制作宽度/高度的x1，y1，x2，y2百分比。您还可以使用cropxunits和cropyunits的任意值来简化数学运算。

负裁剪值将相对于右下角而不是左上角，因此在将负值的绝对值（或者，对于极右值，多余量）复制到变量中以进行填充之后，将它们设置为零或宽度/身高/ cropxunits / cropyunits。

2）如果需要，使用margin=left, top, right, bottom添加填充。单位是显示像素，而不是源像素，因此这些值应该是未缩放的。

3）缩放 - 这是您应用width=x&height=y&mode=max以获得适当显示大小的位置。关闭，它将显示1：1缩放，这可能是也可能不是。 x和y此处应为显示像素中图像的所需宽度/高度，而不是画布。

有关详细信息，请参阅full command reference。

你绝对可以将它作为一个插件，但我建议先做一个javascript实现，然后看看你是否想要以插件的形式将包装放在服务器上。无论哪种方式，我都有过几次这个问题，麻省理工学院授权的代码示例对社区非常有帮助。