AngularJS通过ng-Img-Crop实现头像截取的示例


Posted in Javascript onAugust 17, 2017

最近闲着无聊,写了一个实用代码,AngularJS通过ng-Img-Crop实现头像截取,分享给大家

1.安装插件

bower install ngImgCrop

2.引入插件

<script src="ng-img-crop.js"></script>

<link rel="stylesheet" type="text/css" href="ng-img-crop.css" rel="external nofollow" rel="external nofollow" >

3.添加依赖

var app = angular.module('myApp', ['ngImgCrop']);

4.用法

<img-crop image="myImage" result-image="myCroppedImage"></img-crop>

5.参数

<img-crop
  image="{string}"         //需要截取的图片变量名
  result-image="{string}"     //截取后所赋值的变量名
  [change-on-fly="{boolean}"]    //是否实时更新用户截取图像的预览,若为否,则会等用户停止动作后更新预览的图像
  [area-type="{circle|square}"]   //截取图像框的形状(圆形或正方形)
  [area-min-size="{number}"]    //截取图像框的最小面积
  [result-image-size="{number}"]  //截取后图像的大小
  [result-image-format="{string}"] //截取后图像的格式
  [result-image-quality="{number}"] //截取后图像的质量
  [on-change="{expression}"]    
  [on-load-begin="{expression"]
  [on-load-done="{expression"]
  [on-load-error="{expression"]
></img-crop>

6.Demo

<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.官方文档

https://github.com/alexk111/ngImgCrop

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript(jquery)利用函数修改全局变量的代码
Nov 02 Javascript
javascript学习笔记(十四) window对象使用介绍
Jun 20 Javascript
js 左右悬浮对联广告代码示例
Dec 12 Javascript
DOM基础教程之使用DOM + Css
Jan 20 Javascript
基于javascript实现右下角浮动广告效果
Jan 08 Javascript
AngularJS入门教程之ng-checked 指令详解
Aug 01 Javascript
AngularJS 单元测试(二)详解
Sep 21 Javascript
js数组操作方法总结(必看篇)
Nov 22 Javascript
基于jQuery实现的打字机效果
Jan 16 Javascript
React Native 图片查看组件的方法
Mar 01 Javascript
bootstrap实现嵌套模态框的实例代码
Jan 10 Javascript
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
Apr 06 Vue.js
Javascript中的getter和setter初识
Aug 17 #Javascript
简单实现js进度条加载效果
Mar 25 #Javascript
你可能不知道的JSON.stringify()详解
Aug 17 #Javascript
vue组件Prop传递数据的实现示例
Aug 17 #Javascript
js实现随机点名小功能
Aug 17 #Javascript
浅谈Vuejs Prop基本用法
Aug 17 #Javascript
简单快速的实现js计算器功能
Aug 17 #Javascript
You might like
星际争霸 Starcraft 发展史
2020/03/14 星际争霸
《魔兽争霸3:重制版》更新 多项视觉效果调整
2020/05/04 魔兽争霸
php adodb连接mssql解决乱码问题
2009/06/12 PHP
使用PHP 5.0创建图形的巧妙方法
2010/10/12 PHP
PHP采集类snoopy详细介绍(snoopy使用教程)
2014/06/19 PHP
destoon出现验证码不显示时的紧急处理方法
2014/08/22 PHP
php实现的简单日志写入函数
2015/03/31 PHP
php连接oracle数据库的方法(测试成功)
2016/05/26 PHP
jquery animate图片模向滑动示例代码
2011/01/26 Javascript
jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)
2011/06/28 Javascript
全面解析JavaScript里的循环方法之forEach,for-in,for-of
2020/04/20 Javascript
详解JS数组Reduce()方法详解及高级技巧
2017/08/18 Javascript
Vue slot用法(小结)
2018/10/22 Javascript
点击按钮弹出模态框的一系列操作代码实例
2019/03/29 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
2019/05/23 Javascript
Vue实现数据表格合并列rowspan效果
2020/11/30 Javascript
vue中改变滚动条样式的方法
2020/03/03 Javascript
使用vue构建多页面应用的示例
2020/10/22 Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
2020/10/28 Javascript
python目录操作之python遍历文件夹后将结果存储为xml
2014/01/27 Python
在Mac OS系统上安装Python的Pillow库的教程
2015/11/20 Python
Pycharm学习教程(2) 代码风格
2017/05/02 Python
python的concat等多种用法详解
2018/11/28 Python
对python while循环和双重循环的实例详解
2019/08/23 Python
Python3 shelve对象持久存储原理详解
2020/03/23 Python
css3实现超立体3D图片侧翻倾斜效果
2014/04/16 HTML / CSS
闭幕式主持词
2014/04/02 职场文书
国家奖学金获奖感言
2014/08/16 职场文书
四风问题对照检查材料整改措施
2014/09/27 职场文书
大学生敬老院活动总结
2015/05/07 职场文书
一个都不能少观后感
2015/06/04 职场文书
爱国主义影片观后感
2015/06/18 职场文书
吧主申请感言怎么写
2015/08/03 职场文书
新年祝酒词大全
2015/08/11 职场文书
js实现上传图片到服务器
2021/04/11 Javascript
如何有效防止sql注入的方法
2021/05/25 SQL Server