问题标签 [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 投票
3 回答
7730 浏览

javascript - Jquery Crop:裁剪图像不改变

我有以下代码:

问题是当我选择一个文件时,没有显示新图像(旧图像仍然显示在裁剪器中)。

如您所见,我检查了旧网址并撤销了它。当我不在 startCropper() 函数中使用 $("#crop").cropper({...}) 时,它可以工作。

GitHub:https ://github.com/fengyuanchen/cropper/tree/v2.3.0

如何强制裁剪器加载新​​图像?

0 投票
1 回答
65 浏览

javascript - 想要将处理后的图像存储到服务器本身而不是使用 fengyuanchen jquery cropper 插件将其下载到本地系统

我在我的一个项目中使用 fengyuanchen jquery cropper 插件进行图像处理。该插件旨在在图像处理后将图像下载到本地系统。实际上我想将处理后的图像存储到服务器本身而不是将其下载到本地系统。为此,我需要在 textarea 中获取已处理图像的 URI 数据。我必须在插件代码中进行哪些修改才能生成 URI 数据而不是下载?

项目中有 index.php、cropper.js 和 main.js 三个文件

index.php中的下载按钮代码如下:

在 main.js 中生成下载数据的相应 jquery 代码片段如下:

此代码中的哪些修改将生成 URI 数据?

0 投票
1 回答
654 浏览

modal-dialog - 语义 ui 模态和cropper.js

我正在尝试在语义模式中添加cropper.js。我正在做以下步骤。

1) 我在页面上有一个名为[Choose image]的按钮

2)如果我单击选择图像,则一种模式是打开名称是 [thumbs]。拇指模式有 2 个按钮[从本地电脑中选择][选择媒体]

3)如果我点击从本地 pc 文件中选择对话框打开并且图像选择器正在工作并且cropper.js 被分配给选定的图像完美

4) 如果我点击选择媒体按钮,他们会打开[媒体]模态,我有很多图像,如果我点击图像路径,我在每个图像上都有一个按钮,则传递到名为 thumbs 的上一个模态并分配裁剪工具但是尺寸比给定尺寸小,如果我打开检查铬裁剪器尺寸的元素是完美的。

您会更好地使用以下图像。

http://prnt.sc/cnof60

http://prnt.sc/cnofei

http://prnt.sc/cnofne

http://prnt.sc/cnofxs

如果看到最后 2 张图像,您可以在图像上有所不同。

我正在使用https://fengyuanchen.github.io/cropperjs/进行裁剪功能。

谢谢

0 投票
1 回答
1517 浏览

javascript - CropperJS:裁剪框外的图像不可见

我正在使用 javascriptcropperjs裁剪用户上传的图像。在裁剪器显示中,裁剪框外的图像不可见。下图中显示的示例 -

在此处输入图像描述

我的裁剪器配置是 -

请帮我解决这个问题。

0 投票
1 回答
3099 浏览

javascript - 如何使用表单帖子发送裁剪的图像

如何处理裁剪的图像并通过帖子发送?我正在使用Cropper.js库。HTML 代码已经在表单元素中。这些代码从示例管理模板复制。裁剪有效,但我无法发送文件。

HTML 输出

HTML:

JS:

PHP:

后输出: 输出

0 投票
1 回答
188 浏览

javascript - Cropper 插件未删除视图窗口中的虚线

我正在使用裁剪器插件(2.3.4 版)在模态窗口中裁剪图像。一切似乎都运行良好,除非我使用 'dashed: false' 作为选项,虚线不会被删除。

这是在元素上初始化裁剪器的一小段代码

这是它在窗口中的样子

在此处输入图像描述

仅供参考 - 我从网站上的示例中运行了确切的代码,但我仍然看到虚线

0 投票
2 回答
6757 浏览

cropper - 如何从 Cropper 获得固定大小的作物

我正在使用 Cropper 尝试从上传的图像中获取固定大小的裁剪。这个想法是,如果(如果需要)网站管理员将能够缩放并在无法更改的 Cropper 中构图新图像。通过这种方式,所有被裁剪的图像都是完全相同的大小。

除非用户放大,否则此方法有效。在这种情况下,生成的图像较小,如果缩小,则图像较大。

我正在用这个初始化裁剪器:

然后使用以下方法获取要上传的dataUrl:

通过查看裁剪框所界定的区域,然后使用原始尺寸裁剪图像,它似乎正在裁剪。换句话说,框只是定义了图像的一个边界区域,然后裁剪器以原始大小从原始图像中裁剪出来。我需要它们是 Cropper 设置中定义的大小。

如果您需要更多,请告诉我。

0 投票
0 回答
1005 浏览

javascript - 角度 2 处的 Cropper.js:cropper 显示 previos 图像

我构建 ionic2 应用程序 - 基于 angular 2。在我的应用程序中,我使用Cropper.js库让用户编辑他加载的图像。

现在我有一个问题。当用户加载新图片时,我将其显示在主容器中并打开此图像的裁剪框。

但是裁剪框显示了容器中的前一个图像。

唯一对我有用的解决方案是通过 setTimeout 打开作物,但正如我们所知,这不是一个好的解决方案。

还有什么想法吗?

这是我的代码:

HTML - 容器元素:

现在,在用户单击按钮从相机添加图片(通过cordova插件)后,我得到了图片url,我将图片推送到图片数组,然后设置currentImage变量来保存新图片。

这是我的typeScript 代码,它也有 viewChild 来保存容器。注意 setTimeout 块,现在它可以工作了,但是如果我从 setTimeout 包装器中解包代码 - 它会打开带有上一张图片的裁剪框。

我还尝试将其更改为 NgZone.run 包装器,但没有帮助。

PS 如果您是拥有超过 1500 名声望的用户,请考虑为“cropper.js”创建新标签。

0 投票
0 回答
418 浏览

javascript - fengyuanchen Cropper TypeError: URL.createObjectURL is not a function

我正在尝试使用 Fengyuanchen Cropper Library 创建上传图像但我面临以下错误。它根本无法读取或找到该文件,但它存在于控制台中。

错误

安慰。 在此处输入图像描述

0 投票
1 回答
2007 浏览

jquery-plugins - 如何使用 fengyuanchen 裁剪器处理多张图像

我正在使用 fengyuanchen cropper 库创建图像裁剪器,它也可以工作,但我想将它用于多个图像,如下面的截图但是我很难重新初始化这个插件,因为它只支持一个 avata 图像.

在此处输入图像描述