放大矩形选区图像 (javascript)

Question

我已经被这个问题折磨了好几天了。

经过大量搜索和尝试各种比率算法后，我意识到我大脑的数学部分缺失或已死。

我正在研究裁剪工具。

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

为此，我想放大图像和裁剪框的尺寸，直到裁剪框达到 maxHeight 或 maxWidth 的作品 space。

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

为此，我想我需要将它们乘以比例因子 = (c).

这是一次可悲的尝试。但是比例因子不在地球上。由于我已经选择了大约 85% 的图像，因此图像的比例应该只增加大约 15%。

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

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

// OR

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

// 或

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

我知道我离题太远了。

我无法工作 heights/widths 我必须扩大规模以保持一切的比例。

计算允许我放大裁剪区域的比例因子的正确方法是什么？

如有任何 提示，我们将不胜感激。

Answer 1

好的，我解决了。我会留下这个 post 以防其他人感兴趣。

放大图片和调整裁剪框大小的比例原来是：

// 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;

其中作品space是裁剪周围的相对位置容器space。

放大矩形选区图像 (javascript)

Zoom in on rectangular selection of image (javascript)

javascript

image

crop

zooming