Question

我需要一些调整大小算法的帮助。

情境：

有一张原始的可打印图像
可以在浏览器中显示此原始图像的预览。（让我们说宽度为750px）

从外部系统我收到有关原始图像的裁剪数据。现在我必须在预览图像上显示相同的裁剪框。

将预览图像放入HTML img-tag中。 jquery断头台插件将附加到元素上，以在＃34;裁剪框架中显示图像＆＃34;。（https://github.com/matiasgagliano/guillotine）

我设法计算出正确的宽度，高度，x，y，...... 问题是关于为预览图像设置正确的比例。

这些是从外部系统返回的参数：

调整原始图像的比例（= outputPct）
预览图片调整大小的比率（previewWidth / originalWidth = previewRatio）（ - 宽度，高度，x，y，....）

问题：

如何根据上面的参数计算预览图像的比例？不可能只使用outputPct，因为：

如果原来的outputPct＆gt; 1，然后预览需要进一步放大
如果原始outputPct = 1，则预览需要以100％缩放
如果原始outputPct＆lt; 1，然后预览需要进一步缩放

预览的输出必须与真实图像的输出完全相同。

已经尝试了多种变体，但还没有设法找到合适的解决方案。可能需要实施更多的数学解决方案来解决这个问题。

提前致谢！

Answer 1

如果我做对了，会有一张图像（原始）被裁剪到你无法访问或无法使用的图像，并且有一个预览您可以使用该图像。您需要生成外部系统生成的完全相同的裁剪图像，而不是使用预览图像。

更简单的解释方法是，基本上你应该再次将预览转换为原始图像，这样你就可以应用与外部系统相同的转换并获得完全相同的输出。预览与原始图像（previewWidth/originalWidth）之间的比率，方法是将预览的尺寸乘以您获得原始图像的比例的倒数。

如果清楚的话我们可以立刻完成所有工作。而不是缩放预览然后应用裁剪比例（我猜 outputPct ），直接应用(1/ratio)*croppingScale的比例并保持其余部分，就像外部系统给你的一样。使用Guillotine将是：

var ratio = previewWidth / originalWidth; # = previewHeight / originalHeight

$('#preview-img').guillotine({
  width:  croppingWidth,  # The width of the original image after it's cropped!
  height: croppingHeight, 
  init: {
    x: xOffset,   # Movements over the x and y axes (if any) 
    y: yOffset,   # just as given by the external system.
    scale: croppingScale / ratio
  }
});

这应该可以获得相同的输出，但请记住，即使它具有相同的尺寸并且如果预览明显更小，则包含相同的图像部分，您将在图像质量方面明显受损。 / p>

我希望能解决它，快乐的编码！

Answer 2

感谢您的帮助！搜索了几天之后，我发现它并没有错误的outputPct。问题是DPI。预览始终以96dpi生成，原稿可以是任何dpi。在计算比例时，我需要确保将outputPct与dpiRatio相乘。

根据原始图像输出百分比调整预览图像的大小

2 个答案: