详细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 相关文章推荐
一个cssQuery对象 javascript脚本实现代码
Jul 21 Javascript
js 巧妙去除数组中的重复项
Jan 25 Javascript
Javascript核心读书有感之表达式和运算符
Feb 11 Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
Mar 30 Javascript
使用react-router4.0实现重定向和404功能的方法
Aug 28 Javascript
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
Oct 25 Javascript
angularJs中$scope数据序列化的实例
Sep 30 Javascript
浅谈Angular 观察者模式理解
Nov 01 Javascript
使用webpack构建应用的方法步骤
Mar 04 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
Mar 13 Javascript
微信小程序 scroll-view 水平滚动实现过程解析
Oct 12 Javascript
node静态服务器实现静态读取文件或文件夹
Dec 03 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
Yii框架中 find findAll 查找出制定的字段的方法对比
2014/09/10 PHP
Yii使用ajax验证显示错误messagebox的解决方法
2014/12/03 PHP
thinkphp5框架实现数据库读取的数据转换成json格式示例
2019/10/10 PHP
Laravel手动返回错误码示例
2019/10/22 PHP
php7 list()、session及其他模块的修改实例分析
2020/05/25 PHP
jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)
2014/04/10 Javascript
JavaScript DOM 学习总结(五)
2015/11/24 Javascript
利用JS判断字符串是否含有数字与特殊字符的方法小结
2016/11/25 Javascript
使用DeviceOne实现微信小程序功能
2016/12/29 Javascript
AngularJS中$http使用的简单介绍
2017/03/17 Javascript
Vue表单验证插件Vue Validator使用方法详解
2017/04/07 Javascript
JavaScript生成指定范围的时间列表
2018/03/19 Javascript
一个Vue页面的内存泄露分析详解
2018/06/25 Javascript
Redux实现组合计数器的示例代码
2018/07/04 Javascript
微信小程序中使用ECharts 异步加载数据实现图表功能
2018/07/13 Javascript
微信小程序获取音频时长与实时获取播放进度问题
2018/08/28 Javascript
微信小程序图片自适应实现解析
2020/01/21 Javascript
vue 接口请求地址前缀本地开发和线上开发设置方式
2020/08/13 Javascript
python实现的简单窗口倒计时界面实例
2015/05/05 Python
浅谈Python中range和xrange的区别
2017/12/20 Python
Python 实现数据结构-循环队列的操作方法
2019/07/17 Python
python用WxPython库实现无边框窗体和透明窗体实现方法详解
2020/02/21 Python
全网首秀之Pycharm十大实用技巧(推荐)
2020/04/27 Python
python上selenium的弹框操作实现
2020/07/13 Python
基于python实现简单C/S模式代码实例
2020/09/14 Python
Pandas之缺失数据的实现
2021/01/06 Python
浅析HTML5中的 History 模式
2017/06/22 HTML / CSS
美国知名奢侈美容品牌零售商:Cos Bar
2017/04/21 全球购物
巴西手表购物网站:eclock
2019/03/19 全球购物
估算杭州有多少软件工程师
2015/08/11 面试题
高中生物教学反思
2014/02/05 职场文书
优秀少先队工作者事迹材料
2014/05/13 职场文书
财务管理专业求职信
2014/06/11 职场文书
乡镇干部先进性教育活动个人整改措施
2014/09/16 职场文书
地下停车场租赁协议范本
2014/10/07 职场文书
解析CSS 提取图片主题色功能(小技巧)
2021/05/12 HTML / CSS