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

【问题标题】：Resize preview image based on original image output percentage根据原始图像输出百分比调整预览图像大小
【发布时间】：2014-11-12 08:15:42
【问题描述】：

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

场景：

有一个可以打印的原始图片
此原始图像的预览可在浏览器中显示。（假设宽度为 750px）

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

预览图像被放置在 HTML img-tag 中。 jquery guillotine 插件将附加到元素以在“裁剪框架”中显示图像。 (https://github.com/matiasgagliano/guillotine)

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

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

调整原始图像的百分比 (= outputPct)
预览图像调整大小的比率（previewWidth / originalWidth = previewRatio） (- 宽度、高度、x、y、....)

问题：

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

如果原始 outputPct > 1，则需要将预览放大更多
如果原始outputPct = 1，则预览需要放大100%
如果原始 outputPct

预览的输出需要与真实图像的输出完全相同。

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

提前致谢！

【问题讨论】：

弄个小提琴这太令人困惑了。
很难创建示例小提琴，因为数据是从外部系统中提取的。所以大多数代码会更令人困惑而不是有用。我更新了原始问题以使其不那么混乱。
是outputPct是压缩比。我的意思是 outputPct 意味着 outputPct*100 是压缩百分比吗？
输出百分比是原始（可打印）图像在裁剪前缩放的比例。因此，如果它是 50% (=0.5)，则原始图像将缩放为原始大小的一半。这意味着预览图像的比例需要小于一半 (>50%) 才能得到正确的比例。

标签： javascript algorithm image-processing resize-image

【解决方案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
  }
});

这应该会得到相同的输出，但请记住，即使它具有相同的尺寸并包含相同的图像部分，如果预览明显更小，图像质量也会明显下降。

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

【讨论】：

感谢您的帮助。这确实是我也在尝试的，但没有奏效。解决方案是将 outputPct 与 DPI 比率相乘。对于宽度、高度、X 和 Y，我需要使用预览/原始比例。

【解决方案2】：

感谢您的帮助！经过几天的搜索，我发现这不是一个错误的outputPct。问题是 DPI。预览始终以 96dpi 生成，原件可以是任何 dpi。在计算比例时，我需要确保将 outputPct 与 dpiRatio 相乘。

【讨论】：