问题标签 [ng-img-crop]

我在我的 jhipster 项目中使用这里ng-img-crop提到的步骤。在我的开发人员模式下（即在 STS 中）它工作正常。但是当我创建我的 jhipster 项目的 WAR 文件时，它的行为不正常。

通过图像可以观察到差异

1. STS 行为从 STS 运行时的页面截图
2. WAR 文件行为从 WAR 文件运行时的页面截图

我在选择相同图像时发现的显着差异是：画布（在检查元素部分下的图像中突出显示）自行采用 margin-top 和 margin-left。

在选择图像之前（在 STS 和 WAR 的两个页面中）：

选择图像后

在 STS 的页面中：

并在 WAR 文件的页面中：

有没有办法解决这个问题？任何建议或指示都会非常有帮助。提前致谢。

ng-img-crop 是一个很棒的指令，但是我无法适应我的场景。我的问题是，当用户有图像时，如果他们愿意，我想为他们提供调整图像大小的选项。

所以这是我试图使用的代码：

js：

html:

所以我有两个问题：

1）如果用户确实更改了裁剪，我只想上传新图像。我尝试在 on-change 中设置一个标志，但看起来 on-change 也会在初始化时执行。有什么方法可以知道用户是否真的裁剪了？

2）有什么方法可以设置正方形/圆形的位置。在我的场景中，如果有一个现有的用户图像，我想将裁剪正方形设置为当前图像的尺寸（即图像的边框）。

提前致谢。

我正在使用 ng-file-upload 和 ngImgCropExtended。

一切都很好，我唯一的问题是，当验证失败时，它会静默失败，没有通知用户。

我将 ngf-validate-fn="validate($file)" 添加到我的上传按钮，可以看到错误，但无法访问或检查错误。

我的html：

控制器：

文件使用 $error 对象记录，但我似乎无法访问它。我可以访问文件对象的其他属性，例如名称。

如果我记录构造函数，它会给我

如果我记录它给我的 File 对象（例如）

我可以使用 $file.name 访问普通属性，例如名称。$file.$error 返回未定义。$file.$error() 什么都不返回，没有错误没有日志。正如文档所说，还尝试了 $file.validate.$error

ngf-validate-fn="validate($file)" // 自定义验证函数，返回包含错误的布尔值或字符串。// 验证错误名称：validateFn

最后尝试了 JSON.stringify( $file ) 但这会返回一个空对象 {}

我正在使用ng-file-upload / ngImgCrop和ngDialog使用 angularjs 1.5 版本制作动态应用程序。

我有一个由另一个元素触发的输入字段。我想打开弹出窗口并提供使用上述库裁剪图像的能力。它在没有弹出窗口的情况下工作，但是当我使用弹出窗口时，图像无法预览。

如果我在弹出窗口中添加一个输入字段来 select ，它就可以工作。如果我在打开弹出窗口之前选择图像似乎会失败。如何解决这个问题？

我使用 ngImgCrop 可以在这个JSFiddle中看到。
我试图实现的是，当我显示（使用 ng-if）时，图像选择框会自动打开：

也就是说：我想以编程方式打开图像选择窗口，甚至不向用户显示：

我试过在控制器中放入输入的点击事件的几种变体，但它们都没有奏效，到目前为止我试过：1。

2.

3.

4.

我想创建一个文件上传器，我可以将图片上传到我的 UI，裁剪它，然后将其发送到我的服务器。我一直在使用 ngFileUpload 上传文件，效果很好。我按照指示将 ngImgCrop 添加到我的项目中，并将http://jsfiddle.net/danialfarid/xxo3sk41/590/中的 html 和 css 导入到我的项目中，以了解如何使用它。乍一看，一切看起来都不错，但是当我从硬盘驱动器中选择一张图片时，它不会出现在裁剪区域中。有什么东西是隐藏的还是有其他问题？这是jsfiddle html和css：

我有仅用于上传的代码。图片按预期显示。我想知道为什么它是为一个而不是另一个。此代码适用于 ng-file-upload：

最后，我举了两个例子。这个允许我裁剪图片，但它不会生成没有前缀的 base64 文件，可以轻松上传。第二个虽然相似，但不会将图片用于裁剪。

允许裁剪但不生成可接受的 base64 文件

我认为这提供了一个很好的 base64 文件，但我无法裁剪它以找出

我正在使用角度材料、ng-file-upload和ng-imgcrop-extended进行图像上传。我以前在普通页面上使用所有这些，一切正常，但需求发生了变化，我不得不将此逻辑移至模态。

它的工作方式是我ng-imgcrop用来裁剪照片ng-file-upload并进行上传。所以现在，我有一个元素正在监听文件选择，并处理裁剪。然而，现在它没有在听文件选择，我只能从模态中推断出来。

这是我的代码

模态渲染

图像控制器

模态的.slim

此代码适用于普通的 html 页面。但问题似乎是它不能听的angular.element(document.querySelector('#imgInput')).on('change')部分ImagesController。有谁知道如何使用模态，我可以处理这些类型的事件？我已经看到我可能必须在$mdDialog.show().resolve()函数中包含一些逻辑，但我不确定它在期待什么。

任何帮助，将不胜感激 ：）

当用户选择图像文件时，我尝试打开模态窗口来裁剪图像，但我无法将其传递给模态窗口控制器，反之亦然。这是我的代码：

这是演示。

ngngImgCrop 裁剪的图像中出现了一些透明的条纹/线条。

然而，它是随机发生的，我无法始终如一地重新制作它。

图片大部分都很好，但有时上传的图片在背景中可能会有一些随机线条，如下所示。

有没有人见过类似的问题？任何帮助都感激不尽。

我正在使用 ngImgCrop 指令在我的应用程序中裁剪图像。作为第一步，一旦用户选择了实际图像，它就会立即上传到服务器。第二步是裁剪它。我需要知道裁剪图像的坐标才能将其发送到服务器，以便它根据坐标裁剪图像。是否可以获得裁剪图像的坐标？请告诉我