问题标签 [react-image-crop]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
4 回答
1256 浏览

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

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

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

在此处输入图像描述

0 投票
0 回答
827 浏览

javascript - 有什么好方法可以将 react-image-crop 与 react-dropzone 连接起来吗?

我一直在尝试将 react-image-crop 与 react dropzone 连接起来,但这似乎不起作用,或者我做错了什么。

这是我的拖放组件

这就是 react-image-crop 所在的地方,我在上传照片时尝试了多种打开裁剪的方法,但没有找到好的解决方案,所以删除了所有内容,这就是我现在的位置

我只是不知道如何以正确的方式实现这一点,所以我很感激关于它的每一个建议,在此先感谢

0 投票
2 回答
373 浏览

reactjs - 最大更新深度超出错误,React-image-crop

我正在使用 React-image-crop 选择图像的感兴趣区域,但我需要首先从道具中读取预设的裁剪尺寸,以便在图像打开时选择裁剪区域。我正在使用 componentDidMount() 来更新作物状态。但它不工作,我得到一个错误:Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

我也尝试过更新作物状态,getDerivedStateFromProps但我得到了同样的错误。我哪里做错了?谢谢!

0 投票
1 回答
953 浏览

javascript - 反应中对特定图像尺寸的缩放限制

大家好,我们正在为一家公司构建应用程序。我的任务是为个人资料图片创建图像裁剪功能。我正在使用 react-easy-crop 库。我已经实现了几乎所有的功能,唯一缺少的是放大到某个像素。我们公司不希望用户能够放大小于 600 X 600 像素。我的意思是当用户放大图像大小不能低于 600 x 600 像素时。这是我的代码结构(请注意,这不是我为复杂性问题而减少的完整代码)

这是我对这个问题的解决方案:cropper 内部的这个回调

但这段代码并不能确保我有一个最终产生 600 x 600 的最大缩放限制。(它适用于某些图像,但其他一些图像则不适用。我非常感谢您提前提供的任何建议。

0 投票
0 回答
439 浏览

reactjs - 裁剪的图像小于裁剪(Reactjs + react-image-crop)

我正在尝试react-image-crop在我的 React.JS 项目中实现。我有一个小问题:我裁剪的图像与我的裁剪尺寸不同。我在我的<ReactCrop> 组件上使用以下功能:

这是我的image64toCanvasRef功能:

这是我上传图像并裁剪时的样子:图像 + 裁剪

所以我的猜测是问题在于ctx.drawImage()

0 投票
1 回答
38 浏览

image - 用户如何才能完全自由地裁剪图片

我对插件有疑问image_cropper...我希望用户能够自己裁剪照片而不必使用预设选项(3:2、4:3、16:9、...),但我找不到说明这是如何工作的。我在网上看到过,但不知道怎么用。

这些是您到目前为止可以使用的可能性,但我希望用户能够完全自由地决定:

有谁知道它是如何工作的?

0 投票
1 回答
232 浏览

ios - 图像裁剪之外的 react-native-perspective-image-cropper 在 IOS 中添加白色背景

我使用 react-native-perspective-image-cropper 包动态裁剪图像,它工作得非常好。但是有时当裁剪区域覆盖在图像之外并且我尝试裁剪图像时,它会添加白色背景以替换图像区域的外部。

在 Android 中它不会添加任何白色背景,但在 IOS 中我面临这个问题。

在此处输入图像描述

在此处输入图像描述

0 投票
0 回答
173 浏览

react-native - 图像在本机反应中显示为白色

我正在使用react-native-image-crop-picker将图像从我的设备上传到后端服务器。我能够成功地将图像上传并保存到服务器。但是如果我从我的应用程序中退出并重新登录,则提交的图像显示为白色而不是上传的图像。

图像已保存到后端,路径为file:///data/user/0/com.project/cache/react-native-image-crop-picker/IMG_20201209_230314.jpg.

我的代码

图像容器标记为红色框。在那个红色框内,应该显示图像

在此处输入图像描述

0 投票
1 回答
679 浏览

javascript - 无法在“HTMLCanvasElement”上执行“toBlob”:受污染的画布可能无法在 react-image-crop 中导出

我正在使用 react-image-crop npm 模块来裁剪图像。当我将系统图像作为道具传递给它时,它工作正常,但是当我传递来自后端的图像的 URL 时,此模块显示错误。

“在 'HTMLCanvasElement' 上执行 'toBlob' 失败:可能无法导出受污染的画布。”

0 投票
2 回答
1488 浏览

swiftui - 缩放图像以适应某些尺寸并保持纵横比 SwiftUI

我知道不可能在.scaledToFit()帧为 120 和 430 的图像上使用修改器,.frame(height: 100, width: 100)并期望图像以某种方式保持纵横比并适合宽度为 100 和高度为 100 的帧。

因此,似乎解决此问题的唯一方法是强制用户在使用图像选择器上传图像时将图像裁剪为正方形。这在 SwiftUI 中是否可行/我在这里遗漏了什么?

谢谢