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

标签 javascript reactjs canvas html5-canvas react-image-crop

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

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

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

enter image description here

最佳答案

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

大致是这样的: enter image description here

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

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

关于javascript - 如何使用 React 在客户端裁剪图像而不丢失分辨率,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62585425/

相关文章:

javascript - 如何查找 context.fillText(text, x, y) 的尺寸

javascript - 我有一个大图像,但我需要使用相同的图像,只是大小的一半并保持图像质量

javascript - 在每行的第一个元素上设置边框

javascript - Facebook 点赞按钮在 IE 中不显示

javascript - ReactJs输入: onKeyPressed does not fire for backspace

javascript - 在 Javascript 中绘制多条三 Angular 形线

php - 如何使用 jQuery/Javascript/PHP 删除 HTML 表中的记录

javascript - Jquery Paginate 将项目放在第二页上,并且列表上没有限制,因此实际上并不分页

javascript - 在 reactjs 中为 onClick 添加事件类

reactjs - 使用 jarallax javascript 库时 Gatsbyjs 构建错误