javascript - 如何使用 Angular.js 添加裁剪图像

标签 javascript angularjs image ng-file-upload

我需要一个帮助。我正在使用 Angular.js(i.e-ngFileUpload) 上传图像。这里我需要根据所需的高度和宽度裁剪该图像。我正在解释我的代码下面。

<input type="file" class="filestyle form-control" data-size="lg" name="uploadme" id="bannerimage"  ng-model="file" ngf-pattern="'image/*'" accept="image/*" ngf-max-size="20MB" ngf-min-height="100" ngf-resize="{width: 100, height: 100}"  custom-on-change="uploadFile" required="required" ngf-select="onFileSelect($file);">

下面给出了 Controller 端代码。

$scope.onFileSelect = function($files) {
 console.log('file details',$files);
 fileURL=$files;
}

在正常上传中,我收到以下图像格式的控制台消息。

$ngfName: "ADMIN_CATETYPE_IMG_PATHorig_iceproductgrooming2.png"
name: "ADMIN_CATETYPE_IMG_PATHorig_iceproductgrooming2.png"
size: 16903
type: "image/png"

在这里,如果任何图像与所需的高度和宽度不匹配,它会要求裁剪该图像,再次裁剪后,图像将以上面给出的正确格式设置在文件输入字段内。我在这里使用 angular.js ngFileUpload 模块。请帮助我。

最佳答案

您可以使用此 ngCrop directive.

关于javascript - 如何使用 Angular.js 添加裁剪图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34237130/

相关文章:

javascript - a 关于使用 javascript 的堆栈多维数据集的面试问题

javascript - 在 javascript 中向 MVC Controller 提交表单时如何传递参数?

javascript - 将图像标题区域与图像对齐

javascript - AngularJS 函数提升

r - 以 Shiny 的方式显示来自本地驱动器的 pdf

c++ - 如何在 c++ 或 opencv 中调整图像大小而不损失图像质量

java - 需要从HTML页面解析图片src然后显示

javascript - 如何找到body标签内光标的位置

javascript - Javascript onUnload 方法的问题

javascript - Ng-src 不会在 AngularJS View 中更新