问题标签 [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 回答
5118 浏览

cropper - Cropper.js 以编程方式裁剪

我正在使用cropper.js ( https://github.com/fengyuanchen/cropperjs ) 来处理图像,但我找不到以编程方式裁剪图像的方法。

我要做的是在初始化裁剪器后立即创建裁剪预览。

我已autoCrop启用,但如果我尝试使用它获取数据,cropper.getCroppedCanvas()则返回null.

我注意到这cropper.cropped是错误的,所以可能我需要触发初始裁剪,但不知道如何。

0 投票
1 回答
1922 浏览

reactjs - 在 react-cropper 中设置最小图像分辨率

我正在使用 react-cropper 插件来调整图像大小。我需要提供图像无法调整大小的最小宽度和高度。此外,最小宽度和高度必须与实际图像大小相关,而不是根据视口图像大小。

0 投票
1 回答
1219 浏览

javascript - 使用“canvas.toblob()!”后文件名更改!

我正在使用Cropper.js将裁剪的图像发送到服务器,但是当我使用“convtoblob(blob)”并将 blob 附加到 formfile 然后将其发送到 Web API 时,原始图像文件名丢失并根据附加图像更改为“blob “!

请帮我!

我的部分代码如下所示:

即使我添加了一个新属性,如您所见“//blob.nam = FN;” 我没有在 webAPI 中得到它。我也有 canvas-toBlob.js 但有任何变化!

请帮我!

web api 打印屏幕

html页面打印屏幕

0 投票
0 回答
229 浏览

php - 得到一个空白图像文件我做错了吗

当我使用这个 php 脚本时得到空白图像,请帮忙!cropper.js 用于裁剪 php 脚本没有得到裁剪文件只有空白文件不是图像!

当我使用这个 php 脚本时得到空白图像,请帮忙!cropper.js 用于裁剪 php 脚本没有得到裁剪文件只有空白文件不是图像!

0 投票
2 回答
2517 浏览

javascript - 如何在 laravel 控制器中通过 Cropper Js 接收图像 blob 数据

我正在使用cropper js和laravel,我裁剪图像并将其放入formdata并通过Jquery Ajax将其发送到Laravel控制器。我没有在控制器中获取数据的问题。但只会出错。代码如下:

HTML

Jquery 和 Cropper Js 代码

Laravel 路线

Laravel 控制器

错误

请指导我,如何以正确的方式做到这一点。提前致谢。问候,

0 投票
0 回答
1464 浏览

jquery - 裁剪器不再裁剪相同的图像,如何重置裁剪器

我正在使用cropper.js jquerycropper 裁剪多个图像,但是当我选择图像时,cropper 不允许再次选择相同的图像这是我的cropper 代码。

当我裁剪图像裁剪器时不会再次裁剪相同的图像。如何在 jquery 中重置裁剪器。当我点击保存按钮时,我想在这里重置裁剪器

0 投票
1 回答
1848 浏览

javascript - 未捕获的类型错误:无法读取 null 的属性“toDataURL”-Cropper JS

我正在使用jquery cropper来实现下面这样的事情。每当用户单击输入时,该图像将被发送到裁剪器画布。一旦用户保存裁剪后的图像,它将被加载到预览框中并清除裁剪器画布。

这就是我想要实现的目标 在此处输入图像描述

但问题是,这对第一个输入文件很有用。但是当我尝试对下一个输入做同样的事情时

未捕获的类型错误:无法读取 null 的属性“toDataURL”

当它第一次运行良好时,我无法弄清楚为什么会发生这种情况。

我的代码在下面。

我在 这里向 jsFiddle添加了代码

谁能告诉我我在哪里做错了。谢谢

0 投票
1 回答
1643 浏览

jquery - 如何限制可裁剪区域的宽度和高度以输出相同尺寸的图像?

再会 -

我正在寻找使用 jQuery Cropper.js 插件来创建一个网络表单,该表单具有用户可以上传图像然后裁剪它的字段。

我希望输出的图像始终为 580 x 580。

我想这样做,以便用户无法更改裁剪区域的大小。我希望它始终为 580 x 580。

我还看到,当我想要放大/缩小时,我看到宽度和高度发生了变化。

我还看到其他人说我可以在服务器上调整图像的大小,但是如果图像被裁剪并且它真的很小,那么我看不出它是如何工作的。放大图像将是一个问题。

这是我设置裁剪器的方法。

我有其他一切工作。我正在裁剪图像,将原始图像保存到服务器,裁剪图像,将裁剪的图像转换为 Blob,然后将其发送到服务器并让 Imagick 处理图像。

提前致谢!

0 投票
2 回答
10455 浏览

javascript - 裁剪器 js 使用图像魔术调整大小和裁剪

如何使用来自cropperjs的数据使用 ImageMagick 执行调整大小和裁剪?

用户可以上传大图像并缩放/平移以进行裁剪。尝试使用 blob,但它失去了太多质量并且经常超时。

来自小提琴以下数据的示例:

试过这个,但它种植了错误的区域。还尝试缩放原始图像,但这对于服务器来说太大了。

示例: https ://jsfiddle.net/1knw3a5e/

JS代码:

0 投票
0 回答
398 浏览

javascript - cropper.js - 你如何使用 mouseup 选项来处理cropend 事件?

我试图在图像上绘制裁剪区域后立即在裁剪框左侧显示一个按钮(即在 mouseup 上)。

目前,我只能在用户绘制裁剪框区域然后单击图像上的其他位置后才能显示该按钮。

查看文档,cropend 事件可以使用各种“选项”,包括“mouseup”,我假设这是我在这里所追求的。

链接到cropend 事件文档

但是,我如何实际“使用”该选项?我不熟悉该语法可能是什么样的......

如果用户开始绘制新的裁剪框,我可能需要利用类似的东西来定位cropstart mousedown 选项,以便重新隐藏按钮,但我肯定能够从此处提供的建议中理解它。

这是我到目前为止所拥有的:

预先感谢您的帮助!如果您需要任何进一步的信息,请告诉我!


更新 20180906T11:07:00 第一次绘制裁剪框时,在单击其他位置之前不会显示按钮。但是,如果我继续在同一图像上绘制另一个裁剪框,则按钮会在 mouseup 时立即显示。

更新 20180906T12:13:00 我能够通过重新排序函数来解决这个问题。在cropend 事件中,首先是.show(),然后是.position(...)

但是,如果有一些特定的方法可以针对我最初的问题中列出的 mouseup 选项,我暂时将这个问题保持开放和未回答。