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

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

情景：

有一个原始的打印就绪图像 浏览器中会显示此原始图像的预览。假设宽度为750px 我从外部系统接收原始图像的裁剪数据。现在我必须在预览图像上显示相同的裁剪帧

预览图像被放置到HTML img标记中。jquery断头台插件将附加到元素，以在裁剪框中显示图像

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

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

调整原始图像的大小百分比=outputPct 预览图像大小调整的比率previewWidth/originalWidth=previewRatio -宽度，高度，x，y。。。。 问题:

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

如果原始输出PCT>1，则需要更快速地放大预览 如果原始输出PCT=1，则预览需要放大100% 如果原始输出PCT<1，则预览需要快速放大 预览的输出需要与真实图像的输出完全相同

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

---

提前谢谢

如果我没弄错的话，会有一张你无法访问或无法使用的原始图像，还有一张你可以使用的图像预览。您需要生成与外部系统从原始系统生成的完全相同的裁剪图像，但使用预览图像

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

如果这是明确的，我们可以一次完成。与其放大预览，然后应用裁剪比例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
  }
});

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

---

我希望解决它，快乐编码

谢谢你的帮助！经过几天的搜索，我发现这不是一个错误的outputPct。问题是新闻部。预览总是以96 dpi的速度生成，并且原稿可以是任何dpi。

---

在计算刻度时，我需要确保将输出PCT乘以dpiRatio。

制作一个小提琴这太令人困惑了。很难创建一个小提琴示例，因为数据是从外部系统提取的。因此，大多数代码将更加混乱，而不是有用。我更新了原来的问题，使它不那么混乱。是outputPct是压缩比。我的意思是outputPct是指outputPct*100是压缩的百分比吗？outputPct是原始打印就绪图像在裁剪前缩放的过程量。因此，如果50%=0.5，原始图像将缩放为原始大小的一半。这意味着预览图像的比例必须小于一半>50%，才能以正确的比例结束。谢谢您的帮助。这确实是我也尝试过的，但没有成功。解决方案是将输出PCT乘以DPI比率。对于宽度、高度、X&Y，我需要使用预览/原始比率。