本篇文章主要介绍了Angular实现图片裁剪工具ngImgCrop实践,具有一定的参考价值,有兴趣的可以了解一下
ngImgCrop是AngularJS的一个图片裁剪插件,它实际上是一个封装好的AngularJs指令,可以让用户以圆框或者方框来裁剪图片
1、使用效果截图
2、demo演示
demo演示地址 http://jsfiddle.net/alexk111/rw6q9/
3、下载安装
可以使用两种方式来下载ngImgCrop插件
a、GitHub下载:git clone https://github.com/alexk111/ngImgCrop.git
b、bower安装,如果项目中使用了bower,使用命令bower install ngImgCrop即可
4、添加js和css依赖到项目中
5、添加AngularJs依赖
var myAppModule = angular.module('MyApp', ['ngImgCrop']);
6、使用样例
Select an image file:Cropped Image:
7、属性介绍
8、注意点
结果文件是base64的格式,如果是直接展示的话没有问题,如果是以文件格式要将图片上传给后台服务器,那么还需要将base64转换成图片文件格式,附上我自己的转换代码
$scope.file可直接作为File文件格式上传至后台服务器
function getBlobBydataURL(dataURI,type){ var binary = atob(dataURI.split(',')[1]); var array = []; for(var i = 0; i
以上就是Angular实现图片裁剪工具ngImgCrop实践的详细内容,更多请关注易知道|edz.cc其它相关文章!