问题标签 [cropper]

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 回答
5387 浏览

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

我正在使用cropper.js v0.8.0

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

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

以下是我的 HTML 代码:

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

0 投票
0 回答
38 浏览

android - 在 Android-Image-Cropper 中设置 ColorFilter

我正在使用Android-Image-Cropper by ArthurHub. 我想使用setColorFilter()方法,但在这个库中不可用。那么我可以为此提供一些解决方案或任何其他选项如何将颜色过滤器设置为imageView?提前致谢。

0 投票
1 回答
741 浏览

c# - 使用 Cropper.js 和 Asp.net 裁剪图像

试图得到一个裁剪的图像,但我一直得到图像的不正确部分。

我从cropper.js 得到这个,{left: 316, top: 50.5, width: 150, height: 150}

我在vb中将它传递给这个。

但我最终只得到图像的左上角或右上角?有什么我想念的吗?我把它传给了 x,从cropper 传给了 y。我已经尝试了很多可能性,但似乎没有什么能给我真正的裁剪结果。

0 投票
1 回答
393 浏览

javascript - 剑道。上传。上传方法不会触发 onUpload 事件

当 Kendo Upload 组件应该执行第二次上传时,不会触发 onUpload 事件处理程序。

我使用带有cropperjs(https://github.com/fengyuanchen/cropperjs/blob/master/README.md)的剑道上传来上传图像,裁剪然后发送到服务器。如果图像太大,服务器会发送错误消息。期望用户选择另一个裁剪区域并再次发送图像。在最后一步没有任何反应。

这里是裁剪图像和火上传的方法

然后在 onUpload 处理程序中,初始裁剪图像被裁剪图像替换。

在服务器上向我发送一个错误:

错误在 onError 进程处理程序中处理:

之后,允许用户裁剪已选择的图像。并且在更改裁剪区域后,预计将重复上述步骤。但是$("#file").data("kendoUpload").upload();在第一个代码块之后没有任何反应。但是,我希望必须调用 onUpload 事件处理程序。

0 投票
1 回答
800 浏览

javascript - 一旦选择文件而不在img上获得404,如何触发Cropper?

我正在尝试在我的网站上实现图像裁剪器,但我遇到了一些我不知道如何摆脱的问题。

预期行为:一旦用户通过文件输入从磁盘中选择了他们的图片,它会显示一个模式,您必须在其中裁剪图片(具有预定义的纵横比),然后他们必须单击“裁剪”按钮确认他们有什么裁剪,以便将裁剪后的图片显示为 img 标签。

发生了什么:所选图像在模态框上显示一毫秒,然后弹出并在控制台上打印 404 错误。

我实际上正在使用Cropper

这是我的尝试:

我正在寻找解决方案大约 3 天。还是想不通。:/

0 投票
0 回答
750 浏览

javascript - cropper.js 在左键单击位置周围创建裁剪区域?

当用户单击并拖动图像的某个区域时,cropper.js 运行良好。

当用户只需单击图像的一部分时,如何让cropper.js 裁剪图像的一个区域?

例如,无论用户点击哪里,都会在点击的 x,y 位置周围创建一个 50x50 的“裁剪框”区域。

就目前而言,我可以使用 .setCropData() 方法来设置裁剪框的位置和尺寸,但我只能让它作为cropend 事件的一部分“触发”。

cropstart 事件似乎是一个理想的地方,因为它捕获了初始 mousedown 事件,但我无法让 setCropData() 方法作为该事件的一部分触发。

据我所知,为了让cropper.js 做任何事情,它必须经历一系列事件:从cropperstart,到crop,然后最终到cropend。这意味着必须向某个方向拖动鼠标。如果用户只是单击鼠标就可以了,没有进一步的拖动动作,只会触发cropstart 事件。

例如,作为测试目的简单的东西,这是行不通的:

单击鼠标后,控制台日志报告看似为空的cropBoxData,并且没有在图像上绘制任何裁剪。我怀疑这是因为,如果没有从技术上开始的作物事件,还没有任何东西可以设置。

但是,如果我将同样的东西作为cropend 事件的一部分,它会按预期工作。但不同的是,我不能只是“点击”,而是必须实际拖动任意大小的裁剪框:

有什么想法可以让裁剪器通过手动设置尺寸来“完成动作”,但通过点击而不是通常的拖动?先感谢您!

0 投票
1 回答
393 浏览

jquery - fengyuanchen/jquery-cropper 避免创建新的裁剪框

我正在使用jquery-cropper库来裁剪图像。以下是我当前的代码。

HTML:

Javascript:

CSS:

这工作正常,如下所示。

图片1

问题

用户可以通过单击图像上的某处并拖动来更改裁剪区域的大小(见下图)。如何防止用户创建新的裁剪区域?

注意:用户应该能够移动裁剪框。

图片2

0 投票
0 回答
133 浏览

node.js - 如何在此代码中集成和发送图像裁剪(angular2-img-cropper)?

我需要知道如何将弯曲的图像发送到我的后端,因为它发送的是没有裁剪的原始图像,我无法整合它。

我使用这个库:https ://github.com/cstefanache/angular2-img-cropper

我想我必须看看如何获​​取数据变量,但我不知道如何

这是我的 HTML 代码:

[![屏幕 2][2]][2]

这是我的 component.ts

0 投票
0 回答
260 浏览

javascript - cropper.js - 意外的标识符

尝试使用cropper.js

https://github.com/fengyuanchen/cropperjs
https://fengyuanchen.github.io/cropperjs/

下载并解压我index.php在根级别创建的文件后:

安慰:

index.js

请问有什么问题吗?

0 投票
0 回答
1130 浏览

android - 使用 ArthurHub lib 裁剪图像并将结果传递给其他活动

您好,我正在尝试从 android 相机中裁剪图像。I 相机已激活,并且裁剪图像的活动也已激活。

但是,我无法将裁剪后的图像传递给另一个活动。

我搜索了,我找不到解决方案。我在做什么错?也许,是因为putExtras?

库页面: https ://github.com/ArthurHub/Android-Image-Cropper

我的 PhotoFragment.java

我的 NextActivity.java 是:

我希望在 NextActivity.java 的 ImageView 图像中获得裁剪后的图像

mBitmap 为空??