详细AngularJs4的图片剪裁组件的实例


Posted in Javascript onJuly 12, 2017

本文介绍了AngularJs4的图片剪裁组件,下面我来记录一下,有需要了解AngularJs4的图片剪裁组件的朋友可参考。希望此文章对各位有所帮助。

jQuery里有一个强大的图片剪裁插件,叫cropper.js。这是大神的GitHub地址:https://github.com/fengyuanchen/cropper

首先想在全是ts文件的angular里运用jquery的js代码插件,这时候需要一个东西,他叫桥接文件。npm是一个强大的库,已经有前人在里面封装了cropper以及所有你能想到想不到的插件,你需要做的只是安装上就好了。需要在webstorm的Terminal里敲npm install cropperJs 这样在node_modules文件夹里就会出现cropperjs的文件。有一个@types的文件夹,里面放着你需要用到相对应js插件的ts桥接文件。在Terminal里敲npm install @types/cropperjs

忘了说 在@types下有一个叫index.d.ts的文件,里面有示例:https://github.com/DefinitelyTyped/DefinitelyTyped,在types下搜cropper,有个文件cropperjs-tests.ts,就能看到一个例子,长这样:

import * as Cropper from 'cropperjs';

var image = <HTMLImageElement>document.getElementById('image');
var cropper = new Cropper(image, {
 aspectRatio: 16 / 9,
 crop: function(e) {
  console.log(e.detail.x);
  console.log(e.detail.y);
  console.log(e.detail.width);
  console.log(e.detail.height);
  console.log(e.detail.rotate);
  console.log(e.detail.scaleX);
  console.log(e.detail.scaleY);
 }
});

接下来就可以写代码啦啦啦啦~~

创建一个component

import {Component, Input, AfterViewInit, ViewEncapsulation} from '@angular/core';
import * as Cropper from 'cropperjs';

@Component({
 selector: 'cropper',
 templateUrl: './cropper.component.html',
 styleUrls: ['./cropper.component.less'],
 encapsulation: ViewEncapsulation.None
})

import * as Cropper from 'cropperjs';这个是引用cropper的方式。

encapsulation: ViewEncapsulation.None 因为angular会封装自己的样式,导致自己在less文件里写的样式不生效,这句的意义在于,不让angular生效自己封装的样式。

想要实现点击一个按钮,弹出一个框让你选图片,需要做的是写一个change事件,获取到选中图片的路径,然后运用cropper里的替换路径的replace方法,就能完成换图片显示了。

<input type="file" accept="image/jpeg" (change)="getImgUrl($event)">
getImgUrl($event) {
  this.cropper.replace(window.URL.createObjectURL($event.path[0].files[0])) ;
  console.log($event);
 }

$event 是整个事件对象。

接下来就可以添加自己需要的功能了,比如说向右旋转90度。

<button (click)="rotateRight()">rotate</button>
rotateRight() {
  console.log(this.cropper.getData());
  this.cropper.rotate(90);
 }

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

Javascript 相关文章推荐
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
Dec 22 Javascript
js innerHTML 的一些问题的解决方法
Jun 22 Javascript
js图片模糊切换显示特效的方法
Feb 17 Javascript
js实现透明度渐变效果的方法
Apr 10 Javascript
jQuery实现ajax的叠加和停止(终止ajax请求)
Aug 08 Javascript
微信小程序左右滑动的实现代码
Dec 15 Javascript
小程序实现锚点滑动效果
Sep 23 Javascript
使用axios请求时,发送formData请求的示例
Oct 29 Javascript
JavaScript enum枚举类型定义及使用方法
May 15 Javascript
原生JS实现微信通讯录
Jun 18 Javascript
关于element-ui表单中限制输入纯数字的解决方式
Sep 08 Javascript
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 jQuery
JS中使用gulp实现压缩文件及浏览器热加载功能
Jul 12 #Javascript
Vue中的数据监听和数据交互案例解析
Jul 12 #Javascript
js 监控iframe URL的变化实例代码
Jul 12 #Javascript
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 #jQuery
浅谈原生JS中的延迟脚本和异步脚本
Jul 12 #Javascript
基于zepto.js实现手机相册功能
Jul 11 #Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
Jul 11 #Javascript
You might like
PHP的宝库目录--PEAR
2006/10/09 PHP
PHP实现多进程并行操作的详解(可做守护进程)
2013/06/18 PHP
php无限遍历文件夹示例分享
2014/03/04 PHP
利用谷歌 Translate API制作自己的翻译脚本
2014/06/04 PHP
php实现的Timer页面运行时间监测类
2014/09/24 PHP
php实现的简单美国商品税计算函数
2015/07/13 PHP
PHP实现合并discuz用户
2015/08/05 PHP
PHP中Cookie的使用详解(简单易懂)
2017/04/28 PHP
动态调用CSS文件的JS代码
2010/07/29 Javascript
javascript中的prototype属性使用说明(函数功能扩展)
2010/08/16 Javascript
JavaScript isArray()函数判断对象类型的种种方法
2010/10/11 Javascript
根据选择不同的下拉值出现相对应的文本输入框
2013/08/01 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
2015/10/28 Javascript
AngularJS ng-bind 指令简单实现
2016/07/30 Javascript
原生javascript上传图片带进度条【实例分享】
2017/04/06 Javascript
JS二分查找算法详解
2017/11/01 Javascript
javascript实现最长公共子序列实例代码
2018/02/05 Javascript
webpack 处理CSS资源的实现
2019/09/27 Javascript
关于JSON解析的实现过程解析
2019/10/08 Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
2020/05/01 Javascript
基于vue实现简易打地鼠游戏
2020/08/21 Javascript
Python实现拷贝多个文件到同一目录的方法
2016/09/19 Python
shelve  用来持久化任意的Python对象实例代码
2016/10/12 Python
详解使用python crontab设置linux定时任务
2016/12/08 Python
WINDOWS 同时安装 python2 python3 后 pip 错误的解决方法
2017/03/16 Python
pip安装Python库时遇到的问题及解决方法
2017/11/23 Python
TF-IDF与余弦相似性的应用(二) 找出相似文章
2017/12/21 Python
Python中elasticsearch插入和更新数据的实现方法
2018/04/01 Python
python3 字符串/列表/元组(str/list/tuple)相互转换方法及join()函数的使用
2019/04/03 Python
加拿大著名时装品牌:SOIA & KYO
2016/08/23 全球购物
迟到检讨书1000字
2014/01/15 职场文书
幼儿园三八妇女节活动方案
2014/03/11 职场文书
国庆节演讲稿
2014/05/27 职场文书
2015年测量员工作总结
2015/05/23 职场文书
钢铁是怎样炼成的读书笔记
2015/06/29 职场文书
党员读书活动心得体会
2016/01/14 职场文书