实现图片裁剪工具ngImgCrop实践实践 Angular实现图片裁剪工具 本篇文章主要介绍了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、使用样例 、使用样例 

7、属性介绍 、属性介绍 8、注意点 、注意点 结果文件是base64的格式，如果是直接展示的话没有问题，如果是以文件格式要将图片上传给后台服务器，那么还需要将 base64转换成图片文件格式，附上我自己的转换代码 $scope.file可直接作为File文件格式上传至后台服务器 function getBlobBydataURL(dataURI,type){ var binary = atob(dataURI.split(',')[1]); var array = []; for(var i = 0; i < binary.length; i++) { array.push(binary.charCodeAt(i)); } return new Blob([new Uint8Array(array)], {type:type }); } var $Blob = getBlobBydataURL($scope.myCroppedImage,"image/png"); $scope.file = $Blob; 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。