问题标签 [ng-img-crop]

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 投票
0 回答
379 浏览

javascript - img-crop 在生产中无法正常工作

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

通过图像可以观察到差异

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

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

在选择图像之前(在 STS 和 WAR 的两个页面中):

选择图像后

在 STS 的页面中:

并在 WAR 文件的页面中:

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

0 投票
1 回答
972 浏览

angularjs - ng img crop - 裁剪现有图像

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

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

js:

html:

所以我有两个问题:

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

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

提前致谢。

0 投票
0 回答
1144 浏览

javascript - 无法从返回的对象-ng-file-upload-Angular 中获取错误

我正在使用 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 ) 但这会返回一个空对象 {}

0 投票
0 回答
503 浏览

javascript - 在 angularjs 应用程序的弹出窗口中预览选定的图像

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

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

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

0 投票
2 回答
5300 浏览

javascript - 扳机以编程方式使用角度文件选择

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

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

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

2.

3.

4.

0 投票
2 回答
3347 浏览

angularjs - 你如何使用 ng-file-upload 和 ngImgCrop?

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

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

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

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

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

0 投票
1 回答
1101 浏览

javascript - 角度材料模态和 ng-file-upload

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

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

这是我的代码

模态渲染

图像控制器

模态的.slim

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

任何帮助,将不胜感激 :)

0 投票
1 回答
1101 浏览

angularjs - 如何使用角度 ui 模态将数据传递给控制器​​?

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

是演示。

0 投票
0 回答
53 浏览

javascript - 裁剪图像中出现透明条纹/线条

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

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

图片大部分都很好,但有时上传的图片在背景中可能会有一些随机线条,如下所示。 在此处输入图像描述

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

0 投票
1 回答
471 浏览

angularjs - 如何使用 ngImgCrop 获取裁剪图像的坐标

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