javascript - 如何使用 React 在客户端裁剪图像而不丢失分辨率

Question

我正在尝试在 React 应用程序中裁剪图像。我目前正在使用一个名为 react-image-crop 的库，但裁剪后的图像似乎与浏览器上裁剪区域的大小完全相同，这意味着如果我调整浏览器窗口的大小，图像的相同区域会变得不同大小.有什么方法可以保留原始图像的分辨率并仍然能够在客户端进行裁剪？下图是图片同一区域在不同浏览器尺寸下裁剪后的结果。

我几乎使用开箱即用的 react-image-crop 和以下裁剪参数

 const [crop, setCrop] = useState({unit: '%', width: 100, aspect: 16 / 9 });

Answer 1

其实我也有同样的问题，我也是用react-image-crop。我当前的解决方案是创建一个静态大小为 px 的模态作为裁剪窗口。所以如果窗口尺寸较小，模式溢出将被激活。

大致是这样的:

因此滚动条会根据窗口大小动态变化，并且不会影响图像大小。

如果有真正更好的解决方案，也许我也想听听 :)