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 相关文章推荐
js自执行函数的几种不同写法的比较
Aug 16 Javascript
自动设置iframe大小的jQuery代码
Sep 11 Javascript
js中的replace方法使用介绍
Oct 28 Javascript
首页图片漂浮效果示例代码
Jun 05 Javascript
jscript读写二进制文件的方法
Apr 22 Javascript
js为什么不能正确处理小数运算?
Dec 29 Javascript
浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
Jan 19 Javascript
总结在前端排序中遇到的问题
Jul 19 Javascript
JS中传递参数的几种不同方法比较
Jan 20 Javascript
垃圾回收器的相关知识点总结
May 13 Javascript
JavaScript中var的重要性实例分析
Jul 09 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
Sep 20 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
PHP中__get()和__set()的用法实例详解
2013/06/04 PHP
thinkphp配置连接数据库技巧
2014/12/02 PHP
PHP利用APC模块实现大文件上传进度条的方法
2015/10/29 PHP
php获取ajax的headers方法与内容实例
2017/12/27 PHP
javascript学习网址备忘
2007/05/29 Javascript
JavaScipt基本教程之前言
2008/01/16 Javascript
jquery 输入框数字限制插件
2009/11/10 Javascript
基于jQuery选择器的整理集合
2013/04/26 Javascript
uploadify在Firefox下丢失session问题的解决方法
2013/08/07 Javascript
jQuery 滑动方法slideDown向下滑动元素
2014/01/16 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
2014/06/15 Javascript
jQuery选择器全集详解
2014/11/24 Javascript
jquery实现不包含当前项的选择器实例
2015/06/25 Javascript
微信小程序 less文件编译成wxss文件实现办法
2016/12/05 Javascript
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
2017/02/17 Javascript
详解前后端分离之VueJS前端
2017/05/24 Javascript
Angular服务Request异步请求的实例讲解
2018/08/13 Javascript
Angular Excel 导入与导出的实现代码
2019/04/17 Javascript
python遍历文件夹并删除特定格式文件的示例
2014/03/05 Python
详解Python中的各种函数的使用
2015/05/24 Python
mac下如何将python2.7改为python3
2018/07/13 Python
python 将对象设置为可迭代的两种实现方法
2019/01/21 Python
使用Tensorflow将自己的数据分割成batch训练实例
2020/01/20 Python
Python Django view 两种return的实现方式
2020/03/16 Python
python实现PDF中表格转化为Excel的方法
2020/06/16 Python
CSS3 完美实现圆角效果
2009/07/13 HTML / CSS
video实现有声音自动播放的实现方法
2020/05/20 HTML / CSS
英国现代市场:ARKET
2019/04/10 全球购物
波兰在线儿童和婴儿用品零售商:pinkorblue
2019/06/29 全球购物
项目合作计划书
2014/01/09 职场文书
2014年情人节活动方案
2014/02/16 职场文书
校长竞聘演讲稿
2014/05/16 职场文书
2015年医院工作总结范文
2015/04/09 职场文书
2015年勤工助学工作总结
2015/04/29 职场文书
怎样写观后感
2015/06/19 职场文书
同学联谊会邀请函
2019/06/24 职场文书