棱角的作物工具
下载 棱角的作物工具
棱角的作物工具
Angular Croppie工具是一个基于Croppie.js的AngularJS图像裁剪和旋转模块
纯Javascript执行;也响应!
依赖关系
角
Croppie.js
安装
#使用鲍尔:
$ bower安装ngCroppie
使用npm #:
安装ng-croppie
基本用法
包括ngCroppie模块到你的项目;
控制器中不需要依赖项;
添加& lt; ng-croppie>标签的参数如下:
src图像或Blob:路径到图像文件或Base64;
ng-model Base64:图像输出;
演示
例子
JS
函数ExampleCtrl () {
var vm = this;
vm。inputImage =零;
vm。outputImage =零;
vm。onUpdate = function(data) {
/ / console.log(数据);
};
}
角
.module (' exampleModule ', ' ngCroppie '])
范式(“ExampleCtrl”,[ExampleCtrl]);
超文本标记语言
& lt; ng-croppie src = " inputImage "
ng-model = ' outputImage '
更新= ' onUpdate '
boundry="{w: 400, h: 400}"
viewport="{w: 300, h: 300}"
取向= " true "
旋转= " 90 "
type = "圆"比;
& lt; / ng-croppie>
& lt; !——预览祝辞
& lt; img ng-src = " {{outputImage}} " /比;
参数
图像或Blob数据:图像文件或base64的路径;
Base64 ng-model:输出的图像,返回的都是Base64;
函数更新:在控制器中放置一个函数,当对映像进行更改时运行;
对象boundry {w: __, h: __}:(可选)存放croppie工具的容器大小——默认为400x400;
对象视窗{w: __, h: __}:(可选)输出大小,必须小于边界,否则它将等于边界-默认为300x300;
布尔缩放:(可选)启用缩放滑块-默认为true;
布尔鼠标缩放:使鼠标滚动条放大/缩小。工作与缩放-默认为真;
Boolean zoomslider:仅启用缩放滑块(滚动和缩放缩放仍然可能,如果设置为假),工作与缩放-默认为真;
启用exif方向兼容性-默认为未定义;
布尔方向:(可选)在绑定图像时启用自定义方向支持——默认为false。
整数旋转:将图像旋转到指定的角度量,工作方向-有效值:90、180、270、-90、-180、-270;
字符串类型(可选)可以是'circle'或'square' -默认为'square';
布尔移动:(可选)启用移动视图-默认viewport: 250x250和boundry: 300x300;
版本
1.2.2
更新
修正了firefox的源间隔时间
修复travis构建徽章
添加更新日志文件
贡献者
orif-jr
stasinua
htao00
alanheppenstall
许可证
麻省理工学院©ngCroppie本文转载于:http://www.diyabc.com/frontweb/news33298.html
浙公网安备 33010602011771号