问题标签 [cropperjs]

我在 MVC 5 Razor 页面上使用cropper.js，我不希望用户用鼠标选择裁剪区域，我想用用户无法调整大小的预定义裁剪（选定）区域初始化裁剪器对象，但用户可以移动裁剪图片上的区域以裁剪图片的一部分。

我找不到任何禁用剪辑的选项，我检查了他们的 Git页面，看起来它没有能力，而且我在 Git页面上发布了我的请求，但没有得到任何回复。我需要帮助我如何解决这个问题。

我有一个包含多个输入的表单。一个输入是文件上传器。我正在使用 Cropperjs。那工作正常。它产生一个base64 img。我希望能够将此裁剪的预览图像传递给 php 页面，以便与其他帖子变量一起作为 ajax formData 进行处理。我可以通过 php.ini 中的提交按钮传递其他 $_POST 变量。我如何让图像通过它？

对我来说，它似乎没有附加到 formData 或者我没有要求正确的 FILES var ...

https://jsfiddle.net/nick1572/c6027thL/6/

HTML

JS

我能够在控制台中看到输出。通过在条目上使用 for 循环

如果我在 php.ini 上出现 error_log。输出仅显示“此处错误”它不显示 preview_image

这是 php 页面上 Network > Response 选项卡的输出。

var_dump($_POST); 或 var_dump($_FILES);

谢谢！！

我正在使用角度进行图像裁剪任务。图像有多个需要在鼠标单击时选择的面。我们如何使用 npm 包为 angular 'ngx-image-cropper' 或任何其他解决方案添加多个裁剪框？

我正在尝试制作一个查看用户个人资料并显示用户图片的表单。我创建了一个自定义用户类并添加了带有个人资料图片（头像）的新字段。想法是，当用户查看个人资料时，他可以单击他的图片，并弹出显示当前图片（或看起来像匿名用户的默认图片）的模式表单。然后用户可以点击上传任意大小的新图片并使用cropper.js 将其裁剪为设置为220 x 300 像素的标准格式。

为了开发这个，我在互联网上举了几个例子，并将它们混合在一起。在我希望将新图片保存在用户数据库中之前，它可以完美运行，这只是被忽略，没有任何错误显示。当然，当我从管理界面执行此操作并上传图片时，它每次都有效。

因此，我希望保存图片的部分是从模态表单触发的，它是用 javascript 编写的部分，用于从cropper.js 获取数据：

我在提交时为表单创建了一个新的保存功能，用于实际裁剪：

我的表单有一个 enctype 集：

我究竟做错了什么？

一个事件将被触发（控制台）“百万”时间，当您刚开始移动鼠标时，这会减慢对话框（当您有多个项目时）。

我准备了一个例子： Stacklitz

我能做些什么 ？

感谢您的帮助。

编辑：我制作了一个视频来展示当前的问题。用旧的macbook录的，所以花了点时间哈哈。无论如何，在视频中你可以看到我上传图像，裁剪它并用它生成一个 pdf。预览没有黑色边框，pdf 有黑色边框。希望这有帮助。

所以我得到了一个 web 应用程序，它可以让用户上传个人资料图片，然后生成带有个人资料图片的 pdf。问题是我想用圆角/圆形显示个人资料图片。

我jspdf用来生成pdf。使用该库，我可以使用该方法添加图像，该addImage方法采用 base64 编码的 DataUrl。不幸的是，没有一种原生方法来显示带有圆角/圆形的图像，所以我决定让用户在将 url 编码为 base64 之前裁剪他们的图像。那是奇怪的行为开始的时候......如果裁剪的图像显示在img标签中，那一切都很好，显示了一个漂亮的圆形个人资料图片。当该 dataUrl 用于生成 pdf 时，由于某种原因，图像周围会生成 1px 黑色边框...如果我在浏览器中检查 dataurl 或使用在线 base64 预览器，则只有当它获取时，才会看到黑色边框生成为pdf...

出于演示目的，我制作了一个代码框。白色背景的图像最能说明问题。例如，使用这个图像：profilepicture

这种方法很可能是导致问题的原因（我直接从github上的cropperjs示例中获取了这个方法）：

这种方法用在这样的crop方法中：roundedCanvas = getRoundedCanvas(croppedCanvas);如果我拿出那个方法并只使用roundedCanvas = croppedCanvas;图像，就会被裁剪成一个正方形，并且显示时没有黑色边框。

我不知道如何解决这个问题，甚至是否有可能解决。非常感谢任何在正确方向上的帮助。甚至欢迎在 pdf 上显示圆形/圆形图像的替代方法（我已经尝试过html2canvas但没有用）。

该方法在就绪事件中被调用。在第一次通话时它工作。当模态关闭时，我正在破坏裁剪器 - cropper.destroy()。第二次打开modal后，cropper再次初始化，但这次cropper.getCroppedCanvas()返回null

在模态关闭时会发生这种情况：

我有一个包含带有作物功能的图像上传器的 vue 应用程序。上传裁剪图片成功，取回裁剪后的图片URL。但问题是当用户需要重新上传他们的图像时，画布仍然显示旧图像。当用户取消并重新上传图像时也会发生这种情况。

我已经尝试使用空字符串设置 initialImage 和 updatedImage ，但它仍然无法正常工作。取消或继续裁剪图像后我应该初始化什么？还是有另一种方法可以克服这个问题？我也使用了 vue watcher，但它仍然不起作用。唔。

我有一个 vue 应用程序表单，其中有一个图像上传器。它有子组件，其中带有从ant-design上传上传图像后裁剪图像的功能。它在上传和裁剪过程中正常工作。问题是它仅在用户首次上传图像时才有效。但是在第二次上传图像时，裁剪画布仍然使用需要裁剪的第一张图像。所以我破坏了关闭或保存的功能，它this.cropper.destroy()以某种方式工作了一点，但仍然存在第二次上传将使用第一张图片，第三次上传将使用第二张图片，第四次上传将使用第三张图片等等的错误。如果此错误仍然存​​在，它将没有用户友好性。在这里，我将显示我的子组件代码，我希望它在组件销毁时完全销毁。

实际上我需要做什么才能this.cropper在页面关闭时完全破坏？或者我能做些什么来克服这个问题？

如何在不使用 Ajax 的情况下使用 Cropper.js 编辑图像后上传图像？

HTML

JS