微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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依赖到项目中

rush:xhtml;">

5、添加AngularJs依赖

rush:js;"> var myAppModule = angular.module('MyApp',['ngImgCrop']);

6、使用样例

rush:xhtml;"> Select an image file:
Cropped Image:

7、属性介绍

rush:js;"> [on-load-begin="{expression"]    可选项,图片开始加载执行的表达式
[on-load-done="{expression"]    可选项,图片加载完成执行的表达式
[on-load-error="{expression"]    可选项,图片加载失败执行的表达式

8、注意点

结果文件是base64的格式,如果是直接展示的话没有问题,如果是以文件格式要将图片上传后台服务器,那么还需要将base64转换成图片文件格式,附上我自己的转换代码

$scope.file可直接作为File文件格式上传后台服务器

rush:js;"> 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($s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.myCroppedImage,"image/png");
$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.file = $Blob;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐