当前位置： 移动技术网 > IT编程>脚本编程>AngularJs > Angular实现图片裁剪工具ngImgCrop实践

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

2017年12月12日  | 移动技术网IT编程  | 我要评论

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

1、使用效果截图

  

2、demo演示

demo演示地址

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;

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网