Angular实现图片裁剪工具ngImgCrop实践


Posted in Javascript onAugust 17, 2017

ngImgCrop是AngularJS的一个图片裁剪插件,它实际上是一个封装好的AngularJs指令,可以让用户以圆框或者方框来裁剪图片

1、使用效果截图

Angular实现图片裁剪工具ngImgCrop实践   Angular实现图片裁剪工具ngImgCrop实践

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

<script src="angular.js"></script>
<script src="ng-img-crop.js"></script>
<link rel="stylesheet" type="text/css" href="ng-img-crop.css" rel="external nofollow" rel="external nofollow" >

5、添加AngularJs依赖

var myAppModule = angular.module('MyApp', ['ngImgCrop']);

6、使用样例

<html>
<head>
 <script src="angular.js"></script>
 <script src="ng-img-crop.js"></script>
 <link rel="stylesheet" type="text/css" href="ng-img-crop.css" rel="external nofollow" rel="external nofollow" >
 <style>
  .cropArea {
   background: #E4E4E4;
   overflow: hidden;
   width:500px;
   height:350px;
  }
 </style>
 <script>
  angular.module('app', ['ngImgCrop'])
   .controller('Ctrl', function($scope) {
    $scope.myImage='';
    $scope.myCroppedImage='';

    var handleFileSelect=function(evt) {
     var file=evt.currentTarget.files[0];
     var reader = new FileReader();
     reader.onload = function (evt) {
      $scope.$apply(function($scope){
       $scope.myImage=evt.target.result;
      });
     };
     reader.readAsDataURL(file);
    };
    angular.element(document.querySelector('#fileInput')).on('change',handleFileSelect);
   });
 </script>
</head>
<body ng-app="app" ng-controller="Ctrl">
 <div>Select an image file: <input type="file" id="fileInput" /></div>
 <div class="cropArea">
  <img-crop image="myImage" result-image="myCroppedImage"></img-crop>
 </div>
 <div>Cropped Image:</div>
 <div><img ng-src="{{myCroppedImage}}" /></div>
</body>
</html>

7、属性介绍

<img-crop
  image="{string}"  需要进行裁剪的图片文件  如$scope.myImage
  result-image="{string}"保存裁剪结果的图片文件
如$scope.myCroppedImage
  [change-on-fly="{boolean}"]
 可选项:表示是否在拖拽裁剪区域时实时更新结果文件
  [area-type="{circle|square}"]
可选项:表示裁剪窗口是方的还是圆的,默认是圆的
  [area-min-size="{number}"]

可选项,表示裁剪结果的最小大小,默认是80,即结果最小是高80像素、宽80像素
  [result-image-size="{number}"]
可选项,表示裁剪结果大小,默认是200,即高200像素、宽200像素
  [result-image-format="{string}"]
可选项,表示裁剪结果保存的文件类型,可以选择image/jpeg、image/png、image/webp,默认是image/png
  [result-image-quality="{number}"]
可选项,表示裁剪结果的质量,取值在0.0到1.0之间
  [on-change="{expression}"]


可选项,检测到图片修改后执行的表达式

  [on-load-begin="{expression"]

可选项,图片开始加载执行的表达式
  [on-load-done="{expression"]

可选项,图片加载完成执行的表达式
  [on-load-error="{expression"]

可选项,图片加载失败执行的表达式
></img-crop>

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;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 类型判断代码分析
Mar 28 Javascript
jquery 操作DOM案例代码分享
Apr 05 Javascript
扩展JavaScript功能的正确方法(译文)
Apr 12 Javascript
javascript动态加载三
Aug 22 Javascript
Jquery UI震动效果实现原理及步骤
Feb 04 Javascript
js抽奖实现随机抽奖代码效果
Dec 02 Javascript
js的hasownproperty使用示例
Mar 02 Javascript
javascript验证内容为数字以及长度为10的简单实例
Aug 20 Javascript
前端开发之CSS原理详解
Mar 11 Javascript
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
Jul 04 Javascript
vue中子组件调用兄弟组件方法
Jul 06 Javascript
Vue实现input宽度随文字长度自适应操作
Jul 29 Javascript
jQuery Layer弹出层传值到父页面的实现代码
Aug 17 #jQuery
jQuery条件分页 代替离线查询(附代码)
Aug 17 #jQuery
vue中appear的用法
Aug 17 #Javascript
Angularjs单选框相关的示例代码
Aug 17 #Javascript
js实现简易聊天对话框
Aug 17 #Javascript
node.js+captchapng+jsonwebtoken实现登录验证示例
Aug 17 #Javascript
javascript 日期相减-在线教程(附代码)
Aug 17 #Javascript
You might like
与数据库连接
2006/10/09 PHP
怎样才能成为PHP高手?学会“懒惰”的编程
2006/12/05 PHP
PHP 数据结构队列(SplQueue)和优先队列(SplPriorityQueue)简单使用实例
2015/05/12 PHP
Thinkphp关闭缓存的方法
2015/06/26 PHP
thinkphp3.x中session方法的用法分析
2016/05/20 PHP
jquery实现无限分级横向导航菜单的方法
2015/03/12 Javascript
node.js操作mongodb学习小结
2015/04/25 Javascript
使用AngularJS实现可伸缩的页面切换的方法
2015/06/19 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
2016/09/08 Javascript
js 性能优化之算法和流程控制
2017/02/15 Javascript
AngularJS中下拉框的高级用法示例
2017/10/11 Javascript
使用puppeteer破解极验的滑动验证码
2018/02/24 Javascript
详解React中传入组件的props改变时更新组件的几种实现方法
2018/09/13 Javascript
Vue点击切换颜色的方法
2018/09/13 Javascript
原生JS检测CSS3动画是否结束的方法详解
2019/01/27 Javascript
Vue动态面包屑功能的实现方法
2019/07/01 Javascript
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
2020/04/24 Javascript
Python中工作日类库Busines Holiday的介绍与使用
2017/07/06 Python
Python函数式编程
2017/07/20 Python
Python基础语言学习笔记总结(精华)
2017/11/14 Python
python中yaml配置文件模块的使用详解
2018/04/27 Python
python配置grpc环境
2019/01/01 Python
对Python+opencv将图片生成视频的实例详解
2019/01/08 Python
python使用tkinter库实现五子棋游戏
2019/06/18 Python
python交互模式下输入换行/输入多行命令的方法
2019/07/02 Python
python实现键盘输入的实操方法
2019/07/16 Python
Django框架基础模板标签与filter使用方法详解
2019/07/23 Python
Django配置Bootstrap, js实现过程详解
2020/10/13 Python
python切片作为占位符使用实例讲解
2021/02/17 Python
利用css3实现的简单的鼠标悬停按钮
2014/11/04 HTML / CSS
学生档案自我鉴定
2013/10/07 职场文书
回门宴父母答谢词
2014/01/26 职场文书
打架检讨书
2015/01/27 职场文书
发言稿之优秀教师篇
2019/09/26 职场文书
《敬重卑微》读后感3篇
2019/11/26 职场文书
教你怎么用Python实现GIF动图的提取及合成
2021/06/15 Python