gpt4 book ai didi

javascript - 放大图像的矩形选择(javascript)

转载 作者:行者123 更新时间:2023-11-29 21:03:55 24 4
gpt4 key购买 nike

几天来我一直在为这个问题苦苦思索。

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

我正在研究裁剪工具。

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

为此,我想放大图像和裁剪框的尺寸,直到裁剪框达到工作空间的 maxHeightmaxWidth

裁剪框的topleftwidthheight 值应保持与缩放图像。

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

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

Sad attempt

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

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

我知道我离题太远了。

我不知道我必须按比例放大哪些高度/宽度才能使所有内容保持比例。

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

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

最佳答案

好的,我解决了。我会离开这篇文章,以防其他人感兴趣。

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

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

enter image description here

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

关于javascript - 放大图像的矩形选择(javascript),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45092971/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com