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 相关文章推荐
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
Jun 26 Javascript
一个很简单的jquery+xml+ajax的无刷新树结构(无css,后台是c#)
Jun 02 Javascript
javascript中substr,substring,slice.splice的区别说明
Nov 25 Javascript
js操作textarea方法集合封装(兼容IE,firefox)
Feb 22 Javascript
更优雅的事件触发兼容
Oct 24 Javascript
jquerymobile checkbox及时刷新才能获取其准确值
Apr 14 Javascript
深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
May 08 Javascript
基于Vue.js实现数字拼图游戏
Aug 02 Javascript
JavaScript 计算笛卡尔积实例详解
Dec 02 Javascript
浅谈Koa服务限流方法实践
Oct 23 Javascript
js实现AI五子棋人机大战
May 28 Javascript
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 jQuery
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
smarty缓存用法分析
2014/12/16 PHP
php导出中文内容excel文件类实例
2015/07/06 PHP
搭建Vim为自定义的PHP开发工具的一些技巧
2015/12/11 PHP
使用PHP如何实现高效安全的ftp服务器(二)
2015/12/30 PHP
PHP操作MongoDB实现增删改查功能【附php7操作MongoDB方法】
2018/04/24 PHP
PHP5.0~5.6 各版本兼容性cURL文件上传功能实例分析
2018/05/11 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
PHP mkdir创建文件夹实现方法解析
2020/11/13 PHP
仿微博字符限制效果实现代码
2012/04/20 Javascript
javascript 函数及作用域总结介绍
2013/11/12 Javascript
JavaScript中创建类/对象的几种方法总结
2013/11/29 Javascript
Angular.js与Bootstrap相结合实现手风琴菜单代码
2016/04/13 Javascript
jQuery设置Cookie及删除Cookie实例分析
2016/04/15 Javascript
vue v-model表单控件绑定详解
2017/05/17 Javascript
nodejs实现大文件(在线视频)的读取
2020/10/16 NodeJs
nodeJs爬虫的技术点总结
2018/05/13 NodeJs
vue.js编译时给生成的文件增加版本号
2018/09/17 Javascript
js实现网页同时进行多个倒计时功能
2019/02/25 Javascript
JavaScript JSON数据处理全集(小结)
2019/08/15 Javascript
JS操作json对象key、value的常用方法分析
2019/10/29 Javascript
解决小程序无法触发SESSION问题
2020/02/03 Javascript
带你使用webpack快速构建web项目的方法
2020/11/12 Javascript
Python 条件判断的缩写方法
2008/09/06 Python
跟老齐学Python之通过Python连接数据库
2014/10/28 Python
浅析Python数据处理
2018/05/02 Python
Python中对数组集进行按行打乱shuffle的方法
2018/11/08 Python
对Python闭包与延迟绑定的方法详解
2019/01/07 Python
Python实现数据结构线性链表(单链表)算法示例
2019/05/04 Python
PyQt5的PyQtGraph实践系列3之实时数据更新绘制图形
2019/05/13 Python
Python如何优雅删除字符列表空字符及None元素
2020/06/25 Python
python向企业微信发送文字和图片消息的示例
2020/09/28 Python
材料化学应届生求职信
2013/10/09 职场文书
应届生煤化工求职信
2013/10/21 职场文书
向国旗敬礼活动总结
2014/09/27 职场文书
评奖评优个人先进事迹材料
2015/11/04 职场文书
css3应用示例:新增的选择器
2022/03/16 HTML / CSS