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高级程序设计》阅读笔记(一) ECMAScript基础
Feb 27 Javascript
Javascript模块化编程(一)AMD规范(规范使用模块)
Jan 17 Javascript
js(jQuery)获取时间的方法及常用时间类搜集
Oct 23 Javascript
JavaScript判断前缀、后缀是否是空格的方法
Apr 15 Javascript
js实现文本框只允许输入数字并限制数字大小的方法
Aug 19 Javascript
JQuery导航菜单选择特效
Apr 11 Javascript
jQuery的$.extend 浅拷贝与深拷贝
Mar 08 Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
Nov 22 Javascript
vuex actions传递多参数的处理方法
Sep 18 Javascript
转换layUI的数据表格中的日期格式方法
Sep 19 Javascript
解决removeEventListener 无法清除监听的问题
Oct 30 Javascript
vue 图片裁剪上传组件的实现
Nov 12 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实现的获取网站备案信息查询代码(360)
2013/09/23 PHP
php学习笔记之基础知识
2014/11/08 PHP
PHP打开和关闭文件操作函数总结
2014/11/18 PHP
php微信公众号开发(3)php实现简单微信文本通讯
2016/12/15 PHP
php让json_encode不自动转义斜杠“/”的方法
2020/04/27 PHP
Javascript 获取LI里的内容
2008/12/17 Javascript
Jquery插件之多图片异步上传
2010/10/20 Javascript
javascript中的parseInt和parseFloat区别
2013/07/12 Javascript
使用jquery中height()方法获取各种高度大全
2014/04/02 Javascript
jQuery中dom元素上绑定的事件详解
2015/04/24 Javascript
JavaScript学习笔记之ES6数组方法
2016/03/25 Javascript
微信小程序本作用域下调用全局JS详解及实例
2017/02/22 Javascript
Javascript仿京东放大镜的效果
2017/03/01 Javascript
ECMAScript6变量的解构赋值实例详解
2017/09/19 Javascript
vue实现随机验证码功能的实例代码
2019/04/30 Javascript
[01:06:12]VP vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python中文分词工具之结巴分词用法实例总结【经典案例】
2017/04/15 Python
python 缺失值处理的方法(Imputation)
2019/07/02 Python
对Python中小整数对象池和大整数对象池的使用详解
2019/07/09 Python
django项目环境搭建及在虚拟机本地创建django项目的教程
2019/08/02 Python
解决pandas展示数据输出时列名不能对齐的问题
2019/11/18 Python
TensorFlow命名空间和TensorBoard图节点实例
2020/01/23 Python
浅谈keras中Dropout在预测过程中是否仍要起作用
2020/07/09 Python
世界首屈一指的在线男士内衣权威:HisRoom
2017/08/05 全球购物
纽约复古灵感的现代珠宝品牌:Lulu Frost
2018/03/03 全球购物
如何在C# winform中异步调用web services
2015/09/21 面试题
班干部演讲稿
2014/04/24 职场文书
公司节能减排方案
2014/05/16 职场文书
2015年语文教学工作总结
2015/05/25 职场文书
党员转正意见怎么写
2015/06/03 职场文书
2015年酒店销售部工作总结
2015/07/24 职场文书
幼儿园心得体会范文
2016/01/21 职场文书
《检阅》教学反思
2016/02/22 职场文书
八年级作文之一起的走过日子
2019/09/17 职场文书
python中使用 unittest.TestCase单元测试的用例详解
2021/08/30 Python
对讲机知识
2022/04/07 无线电