问题标签 [croppie]

我在前端使用以下代码上传图像并对其进行裁剪，然后将其发送到使用 ExpressJs 和 Multer 中间件编码的后端。我正在使用 CroppieJs 库来裁剪图像。

据我所知，问题是 Multer 接受 multipart/formdata 编码，而 Croppie JS 提供了 Base64 编码的字符串。Express 抛出实体太大的错误。有人可以告诉我如何将croppie js与multer一起使用吗？

在本地服务器上的网站上工作时，我遇到了Croppie.js的问题。仅当使用模式裁剪图像时才会出现此问题 - 例如，这里一切正常 [codepen]：( https://codepen.io/azerafati/pen/VzOGRe )

我能够使用下图在 Codepen 上重建问题。

问题

使用 Codepen 上的模态，问题仅发生在编辑器视图中 - 图 B：（ [codepen]https://codepen.io/amatek/pen/GREvEbG ）。令人惊讶的是，细节视图中的一切似乎都按预期工作 - 图 A：[codepen]（https://codepen.io/amatek/details/GREvEbG）。

正常行为：在“详细信息”视图中使用模式上的缩放滑块时，图像从中心变换。

错误：但是，当在编辑器视图中时，图像会从一个角转换。当单击裁剪按钮时，这会以某种方式导致上传黑色图像。

有时（取决于应用的缩放量），而不是黑色图像：

• 只上传图片的左侧，右侧被截断；或者
• 上传的图像放大到角落。

即使未应用缩放，仍然存在错位。

环境

从我目前的测试来看，这个问题不会发生在移动浏览器上（尽管我只用 Google Chrome 和 Mozilla Firefox 进行了测试）。我注意到 Windows 7 和 10 台式机上的问题（我尚未在其他操作系统上进行测试）。

存在错误

• Windows 10：谷歌 Chrome 和 Microsoft Edge
• Windows 7：微软边缘

没有错误

• Windows 10：火狐浏览器
• Windows 7：谷歌浏览器和 Mozilla Firefox

到目前为止我的努力

我曾尝试调试croppie.css和croppie.js文件，但无济于事。但是，我强烈怀疑问题出在 js 文件中。它可能与 css transform-origin属性或用于获取图像尺寸的函数有关，在模态上返回不同的值。有谁知道这个问题的原因可能是什么？

我正在做一个项目，我想用模态实现croppie js。为此，我找到了一个适合我要求的 codepen。但问题是在执行裁剪后，结果图像是黑色的。

谁能帮我这个。下面提供了codepen的链接：https ://codepen.io/asrulnurrahim/pen/WOyzxy

我正在使用croppie 插件来调整我的图像大小。这是我的代码：

我当我运行它时，它得到这个错误：

无法在“CanvasRenderingContext2D”上执行“弧”：提供的半径 (-232.792) 为负数。

我从这个教程开始，创建图像成帧器网络应用程序。在该示例中，croppie.js 用于在上传到后端之前裁剪和预览图像。在该示例中，边界和视口设置为 400px（宽度和高度），因此代码如下：

我需要的是边界和视口的大小是1050px，所以我的代码如下：

但是当我将大小设置为 1050 像素时，图像超出框架，并且当从移动图像打开时，图像也超出框架。所以我的目标是裁剪 1050px 大小的图像，但在响应式屏幕中，我的意思是它可以根据屏幕大小做出响应。我曾尝试使用 bootstrap img-fluid类，但它仍然无法正常工作。先感谢您。

我正在使用croppie.js 裁剪用户上传的图像，一旦裁剪完成，ajax 用于上传结果。这是代码...

页面 A..

然后uploader.php是..

如您所见，uploader.phptime()用于 $imageName 变量。

我要么需要在上传过程中将 $imageName 传回页面 A，要么首先在页面 A 中设置 $imageName 并将其与图像信息同时传递给 uploader.php。

经过几个小时和多次尝试，在这里阅读了许多类似的问题，但无法弄清楚如何做到这一点。非常感谢任何帮助。

在调用图像后使用 Croppie.js，此代码会弹出一个裁剪模式并在允许我预览之前要求裁剪是否有一种方法可以在裁剪图像之前先预览图像

我想在选择和预览图像后将裁剪功能作为按钮触发。

我正在尝试使用名为 Croppie 的图像裁剪器，但我正在苦苦挣扎一段时间......在 Croppie 模态中单击“裁剪和插入图像”后，我希望该图像显示在我的表单的其余部分作为预览图像，然后将该图像发送到另一个 ajax 发布功能

JavaScript：

HTML 表单：

模态：

我尝试将图像设置为上传预览容器，但它没有工作......

预期行为

禁用“enforceBoundary”并缩小我们希望在它周围有一个小图像和空白区域

实际行为

缩小一点并点击裁剪按钮后，我们有一个全白的图像，这不是我们所期望的

重现问题的步骤

在 iPhone 上使用 Safari 或 chrome 打开下面的 codepen 链接：

1. 点击“添加”按钮
2. 从您的图库中选择一张图片
3. 模态现已开放。这是您在模态最顶部选择的图片和图片下方的范围滑块
4. 尝试使用此范围滑块缩小，直到图像周围有一些空白区域
5. 点击“裁剪”按钮，您将看到一张全白的图片，您选择的图片不见了！
6. 注意：不要使用安卓设备。在每个安卓设备上都很好

示例链接

这是我的 HTML 代码：

JS代码：

规格

• 浏览器：Safari
• 版本：14

我已准备好讨论这个问题，我会感谢任何可以帮助我解决这个问题的人

在一个 vue 页面中，我按照本教程添加了一个 ImageUpload 组件：https ://www.youtube.com/watch?v=kvNozA8M1HM

它或多或少地起作用。没有错误，但它只显示我的图像和标尺。我可以使用标尺进行缩放，但它不显示边界、圆圈等。它与教程中的示例完全不同……可以这么说。

放在parent中如下：

在我的 package.json 我有：

在 webpack mix 中我有：

我感觉croppie的安装有问题。

有谁知道这里可能是什么问题？