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 相关文章推荐
网页打开自动最大化的js代码
Aug 22 Javascript
js实现div弹出层的方法
Nov 20 Javascript
使用JavaScript+canvas实现图片裁剪
Jan 30 Javascript
JS实现从网页顶部掉下弹出层效果的方法
Aug 06 Javascript
javascript实现禁止复制网页内容汇总
Dec 30 Javascript
AngularJS单选框及多选框实现双向动态绑定
Jan 13 Javascript
javascript绘制漂亮的心型线效果完整实例
Feb 02 Javascript
AngularJS表单详解及示例代码
Aug 17 Javascript
JavaScript中正则表达式判断匹配规则及常用方法
Aug 03 Javascript
Vue Element UI + OSS实现上传文件功能
Jul 31 Javascript
如何实现echarts markline标签名显示自己想要的
Jul 20 Javascript
JavaScript实现简单计时器
Jun 22 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
一个oracle+PHP的查询的例子
2006/10/09 PHP
PHP输出当前进程所有变量/常量/模块/函数/类的示例
2013/11/07 PHP
PHP实现根据数组某个键值大小进行排序的方法
2018/03/13 PHP
使用SMB共享来绕过php远程文件包含的限制执行RFI的利用
2019/05/31 PHP
宝塔面板在NGINX环境中TP5.1如何运行?
2021/03/09 PHP
Javascript Math对象
2009/08/13 Javascript
JavaScript加强之自定义callback示例
2013/09/21 Javascript
JS格式化数字金额用逗号隔开保留两位小数
2013/10/18 Javascript
AngularJS入门教程(一):静态模板
2014/12/06 Javascript
JS实现简易图片轮播效果的方法
2015/03/25 Javascript
JScript中的条件注释详解
2015/04/24 Javascript
基于javascript html5实现多文件上传
2016/03/03 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
2016/09/08 Javascript
js 获取图像缩放后的实际宽高,位置等信息
2017/03/07 Javascript
重新理解JavaScript的六种继承方式
2017/03/24 Javascript
Vue 多层组件嵌套二种实现方式(测试实例)
2017/09/08 Javascript
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
2018/04/01 Javascript
node thread.sleep实现示例
2018/06/20 Javascript
vue将毫秒数转化为正常日期格式的实例
2018/09/16 Javascript
详解ES6 Fetch API HTTP请求实用指南
2018/11/14 Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
2019/06/11 Javascript
JavaScript eval()函数定义及使用方法详解
2020/07/07 Javascript
原生JavaScript实现五子棋游戏
2020/11/09 Javascript
老生常谈进程线程协程那些事儿
2017/07/24 Python
Python多线程threading和multiprocessing模块实例解析
2018/01/29 Python
Python内置模块ConfigParser实现配置读写功能的方法
2018/02/12 Python
Python对List中的元素排序的方法
2018/04/01 Python
树莓派4B+opencv4+python 打开摄像头的实现方法
2019/10/18 Python
Pytorch 多块GPU的使用详解
2019/12/31 Python
Python 实现将大图切片成小图,将小图组合成大图的例子
2020/03/14 Python
区分python中的进程与线程
2020/08/13 Python
解决pip安装tensorflow中出现的no module named tensorflow.python 问题方法
2021/02/20 Python
市政施工员自我鉴定
2014/01/15 职场文书
市级三好学生事迹材料
2014/08/27 职场文书
如何计划开一家便利店?
2019/07/31 职场文书
SpringBoot整合RabbitMQ的5种模式实战
2021/08/02 Java/Android