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 相关文章推荐
jQuery中文入门指南,翻译加实例,jQuery的起点教程
Jan 13 Javascript
JS将表单导出成EXCEL的实例代码
Nov 11 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
May 04 Javascript
node.js中的fs.lchmodSync方法使用说明
Dec 16 Javascript
jQuery中:button选择器用法实例
Jan 04 Javascript
不同编码的页面表单数据乱码问题解决方法
Feb 15 Javascript
JavaScript优化专题之Loading and Execution加载和运行
Jan 20 Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
Sep 06 Javascript
vue实现的下拉框功能示例
Jan 29 Javascript
vue 出现data-v-xxx的原因及解决
Aug 04 Javascript
JavaScript选择器函数querySelector和querySelectorAll
Nov 27 Javascript
vue实现拖拽交换位置
Apr 07 Vue.js
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
PHP+DBM的同学录程序(4)
2006/10/09 PHP
php下利用curl判断远程文件是否存在的实现代码
2011/10/08 PHP
php实现文件下载更能介绍
2012/11/23 PHP
php+ajax实现无刷新的新闻留言系统
2020/12/21 PHP
thinkphp3.x自定义Action、Model及View的简单实现方法
2016/05/19 PHP
修改Laravel5.3中的路由文件与路径
2016/08/10 PHP
Yii框架实现对数据库的CURD操作示例
2019/09/03 PHP
浅析jQuery的链式调用之each函数
2010/12/03 Javascript
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
2011/01/11 Javascript
JavaScript设置首页和收藏页面的小例子
2013/11/11 Javascript
JavaScript使用FileSystemObject对象写入文本文件内容的方法
2015/08/05 Javascript
jquery实现仿新浪微博评论滚动效果
2015/08/06 Javascript
js 判断所选时间(或者当前时间)是否在某一时间段的实现代码
2015/09/05 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
2015/09/22 Javascript
深入浅析AngularJS和DataModel
2016/02/16 Javascript
基于javascript编写简单日历
2016/05/02 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
2016/05/13 Javascript
百度多文件异步上传控件webuploader基本用法解析
2016/11/07 Javascript
使用UrlConnection实现后台模拟http请求的简单实例
2017/01/04 Javascript
jQuery实现的手动拖动控制进度条效果示例【测试可用】
2018/04/18 jQuery
Angular ng-animate和ng-cookies用法详解
2018/04/18 Javascript
[56:00]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第二场
2018/04/10 DOTA
Python基于聚类算法实现密度聚类(DBSCAN)计算【测试可用】
2018/12/26 Python
python使用suds调用webservice接口的方法
2019/01/03 Python
Pyinstaller打包.py生成.exe的方法和报错总结
2019/04/02 Python
Opencv+Python实现图像运动模糊和高斯模糊的示例
2019/04/11 Python
python文字转语音的实例代码分析
2019/11/12 Python
适合Python初学者的一些编程技巧
2020/02/12 Python
详解用Python调用百度地图正/逆地理编码API
2020/07/02 Python
Python  Asyncio模块实现的生产消费者模型的方法
2021/03/01 Python
联想韩国官网:Lenovo Korea
2018/05/10 全球购物
反腐倡廉演讲稿
2014/05/22 职场文书
调任通知
2015/04/21 职场文书
违纪开除通知书
2015/04/25 职场文书
2015年教师节新闻稿
2015/07/17 职场文书
Python深度学习之实现卷积神经网络
2021/06/05 Python