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 相关文章推荐
Maps Javascript
Jan 22 Javascript
javascript下操作css的float属性的特殊写法
Aug 22 Javascript
javascript数组去掉重复
May 12 Javascript
给jqGrid数据行添加修改和删除操作链接(之一)
Nov 04 Javascript
JS对HTML标签select的获取、添加、删除操作
Oct 17 Javascript
jQuery实现简洁的轮播图效果实例
Sep 07 Javascript
js仿京东轮播效果 选项卡套选项卡使用
Jan 12 Javascript
详解微信小程序入门五: wxml文件引用、模版、生命周期
Jan 20 Javascript
JSONP跨域请求
Mar 02 Javascript
vue中的计算属性实例详解
Sep 19 Javascript
node.js处理前端提交的GET请求
Aug 30 Javascript
深入理解webpack process.env.NODE_ENV配置
Feb 23 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部分常见问题总结
2006/10/09 PHP
做一个有下拉功能的留言版
2006/10/09 PHP
自动把纯文本转换成Web页面的php代码
2009/08/27 PHP
php empty函数判断mysql表单是否为空
2010/04/12 PHP
PHP-CGI进程CPU 100% 与 file_get_contents 函数的关系分析
2011/08/15 PHP
Codeigniter实现发送带附件的邮件
2015/03/19 PHP
详解PHP的Yii框架中组件行为的属性注入和方法注入
2016/03/18 PHP
HTML5之lang属性与dir属性的详解
2013/06/19 Javascript
JavaScript数字和字符串转换示例
2014/03/26 Javascript
JavaScript中实现PHP的打乱数组函数shuffle实例
2014/10/11 Javascript
如何在MVC应用程序中使用Jquery
2014/11/17 Javascript
JavaScrip调试技巧之断点调试
2015/10/22 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
2015/11/30 Javascript
手机图片预览插件photoswipe.js使用总结
2016/08/25 Javascript
常用jQuery选择器汇总
2017/02/02 Javascript
原生js更改css样式的两种方式
2017/03/15 Javascript
jQuery开源组件BootstrapValidator使用详解
2017/06/29 jQuery
layui 对table中的数据进行转义的实例
2019/09/12 Javascript
layui监听单元格编辑前后交互的例子
2019/09/16 Javascript
CountUp.js数字滚动插件使用方法详解
2019/10/17 Javascript
使用Angular9和TypeScript开发RPG游戏的方法
2020/03/25 Javascript
python3实现UDP协议的服务器和客户端
2017/06/14 Python
python学习教程之使用py2exe打包
2017/09/24 Python
基于Django的ModelForm组件(详解)
2017/12/07 Python
对python多线程与global变量详解
2018/11/09 Python
pyQt5实时刷新界面的示例
2019/06/25 Python
Python logging模块写入中文出现乱码
2020/05/21 Python
python3 简单实现组合设计模式
2020/07/02 Python
KIKO MILANO俄罗斯官网:意大利领先的化妆品和护肤品品牌
2021/01/09 全球购物
哈萨克斯坦移动和数字技术在线商店:SatelOnline.kz
2020/09/04 全球购物
医药大学生求职简历的自我评价
2013/10/17 职场文书
运动会广播稿300字
2014/01/10 职场文书
2015年度绩效考核工作总结
2015/05/27 职场文书
单位更名证明
2015/06/18 职场文书
《穷人》教学反思
2016/02/19 职场文书
python实现简单反弹球游戏
2021/04/12 Python