问题标签 [cropperjs]

我正在使用 ng-file-upload 预览和上传图像。在我上传图片之前，我想让用户裁剪图片。我尝试使用 ng-img-crop，但它没有我想要的功能（纵横比自定义），但cropper 有（https://github.com/fengyuanchen/cropper/）。我现在唯一的问题是如何使用裁剪器裁剪图像的预览。图像 src 最终成为一个 blob，即“blob:XYZ”。有没有人以这种方式成功使用cropper？可能吗？

我有一个淘汰赛自定义绑定，它将功能包装到图像裁剪库（https://github.com/fengyuanchen/cropper。）我正在捕捉cropend.cropper 事件以（最终）将裁剪后的输出附加到可观察对象。

我在用着：

• 淘汰赛3.3
• jQuery 2.1.4
• 裁剪器 2.0

这是绑定处理程序：

这是我要绑定的元素：

var b = 1当我在;上放置断点（在 chrome 中）时 除了 allBindings 之外，没有定义 init 中的任何参数。不过，我已经看到几个使用这种通用模式的示例（例如这里）。我究竟做错了什么？

我有一个裁剪图像脚本。当用户单击保存按钮时，脚本如何上传裁剪的图像？如何使 PHP 成为裁剪后的图像并上传到服务器？

文档在github-cropperjs上。

我正在尝试将cropper.js 用于以下场景：

1. 用户通过表单输入上传图片
2. 用户裁剪图像，导致裁剪 a
3. 裁剪 a 显示为新图像
4. 用户进一步裁剪图像，导致裁剪 b
5. 两个裁剪的图像都发送到服务器

出于某种原因，当我将通过我的代码生成的 base64 数据 url 放入解码器或图像标签时，我得到一个损坏的图像或一小块图像。以下是我的代码的相关部分：

1. 包含图像标签的页面上存在 Html：id=originalImg

   /li>

2. 用户使用cropper.js 界面选择一个裁剪，然后单击一个按钮，该按钮获取裁剪部分：

   /li>

3. 然后，我将 originalImg 标记替换为具有第二步中的源的新图像标记，然后再次执行上面的步骤 1 和 2。

知道为什么生成的 base64 看起来很不稳定吗？

在我的 Angular 2 应用程序中，我将CropperJS导入如下

1. npm install --save @types/cropperjs npm install --save cropperjs
2. 在 .angular-cli.json 中，添加

3. 在 app.component.ts 中。我按照本指南导入 Cropper

但是当我运行应用程序时，Cropper 是未定义的。我也尝试使用导入铜

但它也不起作用。我错过了什么 ？。
谢谢你的帮助。

关闭。

我发现，我只需要在 tsconfig.json 中指定cropperjs，问题就解决了。

在 .angular-cli.json 中，我们不需要将cropper.min.js”添加到“scripts”字段

下面的功能在 Firefox、chrome、移动设备上运行良好，一切都适用于裁剪图像，然后调用 ajax。但在 Tab - Safari 浏览器中，它不起作用。请帮忙。

我对 fengyuanchen jQuery Cropper.js v3.0.0 有一点问题。我正在尝试覆盖默认预览代码以使其大小与原始图像的显示大小相同。

我目前遇到的问题是，一旦图像的高度超过了原始图像的显示尺寸，预览就会比原始图像大很多。我希望它保持在相同的高度。

这是我正在描述的行为。注意预览的高度：

默认行为显示小于原始图像的预览：

我想要的是使预览保持与原始图像相同的高度，并且不超过它：

这是我的代码：

我正在使用react-cropper并且需要固定的裁剪大小。尝试按如下方式进行：

结果是一个没有任何错误的空屏幕。

我正在尝试从cropperjs 获取裁剪的图像结果，但我不知道如何获取它。我试图在网上搜索，但找不到解决方案。

我的代码如下所示。

这是输出屏幕，其中图像未正确定位，在引导模式内调整大小。

我正在尝试在我的项目的“头像”更新部分中使用“cropper.js”插件。我也使用 jquery 添加了相关的 CSS 和 JS 文件，插件运行良好。我的问题是引导模式内的图像定位/大小。它显示在小和左中间。我正在努力使它们尺寸合适、定位合适并具有响应性输出。我尝试在下面添加。非常感谢对这个问题的任何帮助。

我做了什么：

main.js文件，用于使用cropper插件初始化/上传和裁剪图像

主页- HTML 视图页面