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

Resize preview image based on original image output percentage

本文关键字：图像 百分比 原始 输出 调整      更新时间：2023-09-26

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

场景：

  • 有可打印的原始图像
  • 浏览器中显示了此原始图像的预览。（假设宽度为750px）

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

预览图像被放置到HTML img标记中。jquery guillotine插件将附加到元素上，以在"裁剪框"中显示图像。(https://github.com/matiasgagliano/guillotine)

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

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

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

问题：

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

  • 如果原始输出ct>1，则需要进一步放大预览
  • 如果原始输出ct=1，则预览需要缩放到100%
  • 如果原始输出Pct<1，则预览需要缩小

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

Allready尝试了多种变体，但未能找到合适的解决方案。当然需要实现一个更数学的解决方案来解决这个问题。

提前感谢！

如果我做对了，有一个图像（原始）正在被裁剪，您无法访问或使用它，并且可以使用该图像的预览。您需要生成与外部系统从原始图像中生成的裁剪图像完全相同的，但使用预览图像。

更简单的解释方法是，基本上您应该将预览再次转换为原始图像，这样您就可以应用与外部系统相同的转换，并获得完全相同的输出。预览和原始图像（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
  }
});

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

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

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

相关文章：