问题标签 [react-image-crop]

我正在使用两个库（react-image-crop和react-responsive-carousel），每个库都需要一个 css 导入。我已将 css 加载器添加到next.config.js页面最初加载时，一切都很好。但是，在页面上调用刷新时会出现document is not defined错误。此外，当我yarn build按预期运行构建时，最后会以 a 失败Reference Error并引用此document is not defined错误。

任何帮助都会很棒。

next.config.js

我正在尝试构建 poc 以通过拖放（react-dropzne）上传图像，然后使用 react-easy-crop 裁剪相同的图像，但我无法将它们相互连接。使用裁剪的简单图像上传button工作正常每当我将拖放道具应用于input元素拖放不起作用时，我都会卡住

这是我的

当我单击下载按钮时，它会将我带到带有图像的新空白页面，但是在文档中的 API 示例中，单击时将其下载到本地存储，为此在 git 中它告诉我使用文件-saver 下载文件，但我无法使用文件保护程序下载，所以任何人都可以帮助我直接在下载按钮上下载，点击编辑后的图像到本地存储。 附上代码文件图片

我正在尝试通过使用react-image-crop库来裁剪图像，并且裁剪功能正常工作。

但是，我想要实现的是：

• 裁剪后保留原始图像
• 将图像放在具有特定尺寸（235px x 346px）的预览 div 中
• 转换图像以适应具有相同定义裁剪的预览 div
• 确保预览 div 与突出显示的裁剪相匹配

我尝试的是上面的代码，但它的问题是宽度+高度动态变化。

我尝试使用固定的宽度和高度值，但裁剪已关闭。我也尝试scale在转换中使用该属性，但它也关闭了：

我需要弄清楚如何将它们限制为（235px x 346px），并“缩放”图像以匹配来自react-image-crop.

我怎样才能做到这一点？

代码沙箱中的示例

我已经构建了一个 Slack 风格的头像图像上传和裁剪功能，但我无法将裁剪后的图像保存而不会损坏。原始文件上传，使用相同的端点和方法，工作得很好。它是从 Blob 手动创建的裁剪副本，总是损坏的。

步骤非常简单：

1. 选择并上传图像文件
2. 裁剪（react-image-crop）出现
3. 选择区域，点击保存

在步骤 1 中，当文件输入发生变化时，文件被上传。文件被发送到流式端点，该端点将文件上传到 s3 存储桶。

UploadFile var 是从输入控件返回的 File 对象。这很好用！还没有问题。

在第 3 步中，一旦您选择了图像的一个区域，react-image-crop 就会生成一个 Blob。

这个 Blob 是有效的，因为我在保存之前在屏幕上显示了选定的区域：

我将 react-image-crop 生成的 Blob 填充到 File 对象中，因为这是我的代码所期望的，就像步骤 1 一样。

上面 FileReader 加载中的“结果”是 base64 图像数据：

新的 File 对象对我来说似乎是合法的：

然后我再次通过端点发送图像，并上传。它出现在存储桶中，并且文件大小看起来是合法的（不是 0KB 像断流所表明的那样。）

但是，在下载并尝试打开文件时，它已损坏。我想我在某处遗漏了一个选项......一些可以使这项工作正常进行的小调整？File 对象是否没有正确形成？如何进一步解决此问题？

我使用 react-image-crop ( https://www.npmjs.com/package/react-image-crop ) 裁剪大图像。我需要裁剪 1920X726 大小的图像。如果我为裁剪器提供这个尺寸，它会在图像中添加空白画布。