0

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

设想：

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

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

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

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

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

  • 调整原始图像的百分比（= outputPct）
  • 预览图像调整大小的比率 (previewWidth / originalWidth = previewRatio) (- width, height, x, y, .... )

问题：

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

  • 如果原始 outputPct > 1，则预览需要放大更多
  • 如果原来的outputPct = 1，那么预览需要放大100%
  • 如果原始 outputPct < 1，则预览需要放大到更少

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

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

提前致谢！

4

2 回答 2

0

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

于 2014-09-21T10:54:29.610 回答
0

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

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

如果这很清楚，我们可以一次完成。而不是放大预览然后应用裁剪比例（我猜outputPct），直接应用一个比例(1/ratio)*croppingScale并保留其余部分，就像外部系统给你一样。使用断头台将是：

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
  }
});

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

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

于 2014-09-20T07:07:40.407 回答