问题标签 [cropperjs]

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 投票
1 回答
1551 浏览

javascript - 使用 CropperJS 保存裁剪图像时无法读取未定义的 toBlob 属性

我有一个代码可以通过 ajax 将裁剪后的图像发送到我的服务器,如下所示:

我的html是这样的:

我不断收到此错误Uncaught TypeError: Cannot read property 'toBlob' of null

我已经尝试过从https://fengyuanchen.github.io/cropperjs的 CropperJS github 页面将裁剪图像上传到服务器的其他方法。

请协助。

0 投票
1 回答
1490 浏览

jquery - 无法使用javascript替换旧图像的图像

我无法用新选择的图像替换旧图像。在这里,我在模态中显示了选定的图像,并允许用户选择图像的一部分。在这种情况下,我可以在模态本身中显示图像。但是单击保存按钮时我无法替换旧图像。我尝试修改代码来解决这个问题,但在我的情况下,代码不起作用。帮我。提前致谢。

0 投票
1 回答
663 浏览

javascript - 图片上传不起作用(在模态上处理cropper.js)

我有一个模式signup.html,应该在上传文件时显示来自cropper.js的图像裁剪器。但是,如果我尝试更改正在上传的文件,模式会显示我使用的第一个文件。我究竟做错了什么?

PS:我是第一次使用cropper.js。

这是我的代码:

注册.html:

image_cropper.js:

文件输入由 Django 渲染,但看起来像这样:

0 投票
1 回答
4432 浏览

vue.js - 如何将纵横比设置为 vue cropperjs

从 vue-cropper.js 示例中,我找不到像在选项中的 jquery 版本上那样设置纵横比的方法。在 jquery 版本中,您可以将选项传递给使用裁剪的元素,在这个我找不到答案..

没有提到:

https://github.com/Agontuk/vue-cropperjs ..

我需要将纵横比设置为 1:1;

有什么帮助吗?

谢谢

0 投票
0 回答
492 浏览

html - CropperJS 和 HTML5 画布

我有一个 CropperJS 的测试平台——我已经包含了一个工作示例。它显示您的相机,当您单击拍摄快照时,它会将当前图像复制到画布。但是,我无法使以下工作:

  1. 裁剪图像时,我需要将裁剪后的图像放在画布而不是图像控件中。
  2. 我需要将上传图片从实际点击图片移动到点击上传按钮。

0 投票
0 回答
503 浏览

javascript - 裁剪器没有重新启动如果我没有先裁剪旧图像

我的项目有问题。

我正在使用裁剪器进行图像处理。但收割机无法正常工作。当我上传图像时,显示的裁剪选项。但是如果我添加另一个图像而不裁剪第一个图像,那么裁剪器不会改变图像。

这是我的代码

我不知道第二次在哪里重置割草机。如果我裁剪图像然后重新上传 imgae,那么裁剪器工作得很好。

0 投票
1 回答
1730 浏览

reactjs - React-cropper - cropBox is out of the image

I'm using the latest cropper.js react package react-cropper in my current project and I'am just lost. The problem is, that the crop area can go outside of the image, which should not. I have tried everything I can think of.

Here is the _crop method which is called on every change in cropper.

I know it's a sessionStorage nightmare, but I can't use state because it would reset whole cropper. I'm also getting the canvasData from the image tag, because the cropper.canvasData() function is not working in this react package.

In my code above, react is able to detect that crop area is outside of the image, but I don't know what I should do there. I tried to set the position of the crop area to the first position where it's outside of the image. But the data is not changing.

0 投票
1 回答
3225 浏览

javascript - 如何使用cropper.js动态裁剪两个不同纵横比的图像?

我有一个表单,用户将在其中选择个人资料图片和封面图片。

所以我使用Cropper.js以正确的大小打开和裁剪图像。

为了不必不必要地重复代码,我考虑过动态地编写脚本,以便它在两种情况下都能正常工作。

在输入文件字段中,我输入了将要打开的文件类型,以及宽度和高度的尺寸以这种方式

因此,我使用相同的模态进行剪辑,并尝试根据所选选项为每个目的地分开。

你可以在这里看到完整的代码:

当我第一次打开图像时,它适用于每种类型的图像。但是当我尝试下一张图片时,将结果发送到上一个字段时发生错误。

我哪里错了?

0 投票
1 回答
5387 浏览

jquery - 如何给cropper.js一个固定的高度和宽度来相应地裁剪

我正在使用cropper.js v0.8.0

我使用下面的 jQuery 代码来裁剪图像。

每当裁剪器区域发生裁剪图像时,默认情况下按纵横比裁剪图像。我希望它以特定的高度和宽度进行裁剪,例如 420x230。我试过了

以下是我的 HTML 代码:

但仍然没有成功。代码中是否有任何错误或由于较低版本无法正常工作,任何人都可以帮助我更新版本。这将非常有帮助。自过去 10 小时以来,M 一直坚持这一点。

0 投票
0 回答
69 浏览

codeigniter - 裁剪的图像加密数据未发布在实时服务器上的 codeigniter 中。为什么?

我有一种情况,用户选择照片并对其进行裁剪。裁剪传递给隐藏输入的编码数据已成功,但在发布我的表单时,图像数据未发布。仅显示空白页。

相同的代码在本地服务器上运行良好。但是在实时服务器上,这发生在我身上。

让我分享我的代码。请指导我哪里做错了。

用户控制器