详细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 相关文章推荐
JavaScript 学习笔记之变量及其作用域
Jan 14 Javascript
JS原型、原型链深入理解
Feb 27 Javascript
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
Apr 14 Javascript
JavaScript实现二维坐标点排序效果
Jul 18 Javascript
pm2 部署 node的三种方法示例
Oct 20 Javascript
基于Angular中ng-controller父子级嵌套的相关属性详解
Oct 08 Javascript
vue项目中实现图片预览的公用组件功能
Oct 26 Javascript
vue的for循环使用方法
Feb 12 Javascript
浅谈对于react-thunk中间件的简单理解
May 01 Javascript
React+TypeScript+webpack4多入口配置详解
Aug 08 Javascript
node.js基础知识汇总
Aug 25 Javascript
html5中sharedWorker实现多页面通信的示例代码
May 07 Javascript
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删除数组中特定元素的两种方法
2013/07/02 PHP
php使用$_POST或$_SESSION[]向js函数传参
2014/09/16 PHP
PHP实现的简单网络硬盘
2015/07/29 PHP
arguments对象
2006/11/20 Javascript
JS 有趣的eval优化输入验证实例代码
2013/09/22 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
2014/03/08 Javascript
node.js中的path.sep方法使用说明
2014/12/08 Javascript
jQuery中DOM操作实例分析
2015/01/23 Javascript
jquery使用slideDown实现模块缓慢拉出效果的方法
2015/03/27 Javascript
基于replaceChild制作简单的吞噬特效
2015/09/21 Javascript
JS实现字符串转日期并比较大小实例分析
2015/12/09 Javascript
简易的JS计算器实现代码
2016/10/18 Javascript
原生JavaScript实现Tooltip浮动提示框特效
2017/03/07 Javascript
vue.js中实现登录控制的方法示例
2018/04/23 Javascript
js实现二级联动简单实例
2020/01/11 Javascript
使用Vue实现简单计算器
2020/02/25 Javascript
OpenLayers加载缩放控件使用方法详解
2020/09/25 Javascript
video.js添加自定义组件的方法
2020/12/09 Javascript
朴素贝叶斯算法的python实现方法
2014/11/18 Python
用 Python 爬了爬自己的微信朋友(实例讲解)
2017/08/25 Python
使用python实现链表操作
2018/01/26 Python
实例讲解Python3中abs()函数
2019/02/19 Python
利用python将图片版PDF转文字版PDF
2019/05/03 Python
pyqt 实现为长内容添加滑轮 scrollArea
2019/06/19 Python
使用python将excel数据导入数据库过程详解
2019/08/27 Python
windows下python安装pip方法详解
2020/02/10 Python
Python标准库shutil模块使用方法解析
2020/03/10 Python
python3从网络摄像机解析mjpeg http流的示例
2020/11/13 Python
国外平面设计第一市场:99designs
2016/10/25 全球购物
澳大利亚领先的在线美容商店:Facial Co
2017/10/22 全球购物
师德师风演讲稿
2014/05/05 职场文书
数学教研活动总结
2014/07/02 职场文书
2014年信息技术工作总结
2014/12/16 职场文书
员工试用期转正自我评价
2015/03/10 职场文书
Springboot使用Spring Data JPA实现数据库操作
2021/06/30 Java/Android
【DOTA2】总决赛血虐~ XTREME GAMING vs MAGMA - OGA DOTA PIT 2022 CN
2022/04/02 DOTA