Javascript 将裁剪区域向上扩展到HTML画布上

谁擅长数学

我有一个像这样的图像和画布

底部的画布大约比上面的裁剪框大10倍，但我们正在放大裁剪区域

我已经计算出如何使裁剪区域的宽度始终为100%，下面是代码

const canvas = document.createElement('canvas')
const scaleX = image.naturalWidth / image.width
const scaleY = image.naturalHeight / image.height
const ctx = canvas.getContext('2d')

const xCropScale = crop.width / image.width

canvas.width = crop.width * scaleX + image.naturalWidth * (1 - xCropScale)
canvas.height = crop.height * scaleY

ctx.drawImage(
  image,
  crop.x * scaleX,
  crop.y * scaleY,
  crop.width * scaleX,
  crop.height * scaleY,
  0,
  0,
  crop.width * scaleX + image.naturalWidth * (1 - xCropScale),
  crop.height * scaleY
)

我面临的问题是，根据我们的种植面积和种植面积的增加来确定比例的高度。如您所见，屏幕截图沿X轴方向是正确的，但Y轴需要缩放，以避免图像扭曲

image.naturalWidth是我上传的1000像素图像宽度（也是底部图像宽度），image.width是大约200px的顶部图像宽度

---

谢谢

NB:在不知道剪切图像的下一步是什么的情况下：

考虑缩放裁剪后的图像，而不是自己计算尺寸

例如，要使裁剪的图像加倍

crop.scale(2,2);