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 相关文章推荐
jquery 插件开发 extjs中的extend用法小结
Jan 04 Javascript
jquery动态增加text元素以及删除文本内容实例代码
Jul 01 Javascript
php 中序列化和json使用介绍
Jul 08 Javascript
JQuery的ready函数与JS的onload的区别详解
Nov 21 Javascript
jQuery中extend函数详解
Feb 13 Javascript
JS中mouseover和mouseout多次触发问题如何解决
Jun 06 Javascript
JS获取当前时间的实例代码(昨天、今天、明天)
Nov 13 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
Apr 30 Javascript
layui table数据修改的回显方法
Sep 04 Javascript
在Koa.js中实现文件上传的接口功能
Oct 08 Javascript
VUE实现图片验证码功能
Nov 18 Javascript
原生JS实现无缝轮播图片
Jun 24 Javascript
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
PHP中Date获取时间不正确怎么办
2008/06/05 PHP
php生成SessionID和图片校验码的思路和实现代码
2009/03/10 PHP
关于php中的json_encode()和json_decode()函数的一些说明
2016/11/20 PHP
PHP中的异常处理机制深入讲解
2020/11/10 PHP
XmlUtils JS操作XML工具类
2009/10/01 Javascript
JSON辅助格式化处理方法
2013/03/26 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
2013/09/25 Javascript
Extjs表单常见验证小结
2014/03/07 Javascript
Javascript正则控制文本框只能输入整数或浮点数
2014/09/02 Javascript
JS实现很酷的水波文字特效实例
2015/02/26 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
2020/08/27 Javascript
jQuery 实现评论等级好评差评特效
2016/05/06 Javascript
JavaScript初学者必看“new”
2017/06/12 Javascript
jQuery实现的自定义轮播图功能详解
2018/12/28 jQuery
[50:20]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第四局
2016/03/06 DOTA
[03:56]DOTA2完美大师赛趣味视频之小鸽子和Mineski打台球
2017/11/24 DOTA
Python实现监控程序执行时间并将其写入日志的方法
2015/06/30 Python
Python中函数参数设置及使用的学习笔记
2016/05/03 Python
python numpy函数中的linspace创建等差数列详解
2017/10/13 Python
Python定义一个跨越多行的字符串的多种方法小结
2018/07/19 Python
在Python 中实现图片加框和加字的方法
2019/01/26 Python
详解Python 4.0 预计推出的新功能
2019/07/26 Python
tensorflow 保存模型和取出中间权重例子
2020/01/24 Python
python数据分析:关键字提取方式
2020/02/24 Python
如何用Python进行时间序列分解和预测
2021/03/01 Python
SKECHERS官方旗舰店:美国舒适运动休闲品牌
2017/12/22 全球购物
澳大利亚先进的皮肤和激光诊所购物网站:Soho Skincare
2018/10/15 全球购物
医学院毕业生自荐信范文
2014/03/06 职场文书
社区消防工作实施方案
2014/03/21 职场文书
安全承诺书范文
2014/03/26 职场文书
大学生通用个人自我评价
2014/04/27 职场文书
青春奉献演讲稿
2014/05/08 职场文书
预防煤气中毒方案
2014/06/16 职场文书
商铺消防安全责任书
2014/07/29 职场文书
关于读书的演讲稿800字
2014/08/27 职场文书
Nginx图片服务器配置之后图片访问404的问题解决
2022/03/21 Servers