放大图像的矩形选择（javascript）

Question

我已经用这个问题砸了几下墙头。

经过多次搜索和试验各种比率算法后，我意识到我大脑中的数学部分缺失或死亡。

我正在使用裁剪工具。

在图像上选择矩形裁剪区域后，我想放大裁剪区域。

要做到这一点，我要扩大图像和裁剪框的尺寸，直到裁剪框击中 maxHeight 或 maxWidth 的工作空间。

裁剪框的顶部，左，宽度和高度值应保持相对比例和缩放图像的值。

为此，我想我需要将它们乘以比例系数=（ c ）。

这是一次悲伤的尝试。但比例因子是在地球上。由于我选择了约85％的图像，因此图像的比例应仅增加约15％。

我已经尝试了各种方法来获得根据新尺寸缩放图像和裁剪框所需的比率：

 const c = Math.min( croppingAreaNewWidth  / currentImageWidth, croppingAreaNewHeight / currentImageHeight);

// OR

 const c = Math.min( croppingAreaOldWidth  / croppingAreaNewWidth, croppingAreaOldHeight / croppingAreaNewHeight );

// OR

const c = Math.min( croppingAreaNewWidth  / workspaceWidth, croppingAreaNewHeight / workspaceHeight );

我知道我离开了。

我无法工作，我必须扩大哪个高度/宽度以保持一切比例。

计算比例因子的正确方法是什么，这样我可以放大裁剪区域？

任何提示都将不胜感激。

Answer 1

好的，我把它解决了。我会留下这篇文章以防万一其他人感兴趣。

放大图像和调整裁剪框大小的比率结果为：

// Using: Math.min( maxWidth / srcWidth, maxHeight / srcHeight )
const ratio = Math.min( workspaceWidth  / croppingAreaNewHeight, workspaceHeight / croppingAreaNewHeight);

我使用比率来转换图像：

 const newImageScaleValue = currentImageScaleValue * ratio;

 const newImageTranslateY =  (-1 * (croppingAreaNewOffsetTop * ratio )) + (currentImageTranslateY * ratio);

 const translateX =  (-1 * (croppingAreaNewOffsetLeft * ratio )) + (currentImageTranslateX * ratio);

 const newImageWidth = currentImageWidth * ratio;

 const newImageHeight = currentImageHeight * ratio;

工作空间是裁剪空间周围的相对位置容器。