详细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 相关文章推荐
js特殊字符转义介绍
Nov 05 Javascript
javascript修改表格背景色实例代码分享
Dec 10 Javascript
javascript 回到顶部效果的实现代码
Feb 17 Javascript
JavaScript实现同步于本地时间的动态时间显示方法
Feb 02 Javascript
jQuery hover事件简单实现同时绑定2个方法
Jun 07 Javascript
jQuery Ajax 加载数据时异步显示加载动画
Aug 01 Javascript
Highcharts学习之数据列
Aug 03 Javascript
微信小程序之分享页面如何返回首页的示例
Mar 28 Javascript
vue基础之使用get、post、jsonp实现交互功能示例
Mar 12 Javascript
Vue.js中该如何自己维护路由跳转记录
May 19 Javascript
使用vue实现各类弹出框组件
Jul 03 Javascript
解决vue请求接口第一次成功,第二次失败问题
Sep 08 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数组索引的Key加引号和不加引号的区别
2014/08/19 PHP
Ext JS Grid在IE6 下宽度的问题解决方法
2009/02/15 Javascript
JS 自动完成 AutoComplete(Ajax 查询)
2009/07/07 Javascript
JQuery扩展插件Validate 1 基本使用方法并打包下载
2011/09/05 Javascript
jQuery 1.7.2中getAll方法的疑惑分析
2012/05/23 Javascript
JS小游戏之宇宙战机源码详解
2014/09/25 Javascript
javascript实现淘宝幻灯片广告展示效果
2015/04/27 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
2016/05/24 Javascript
PassWord输入框代码分享
2016/06/07 Javascript
jQuery解析与处理服务器端返回xml格式数据的方法详解
2016/07/04 Javascript
jQuery实现的checkbox级联选择下拉菜单效果示例
2016/12/26 Javascript
微信小程序 九宫格实例代码
2017/01/21 Javascript
原生js实现瀑布流布局
2017/03/08 Javascript
使用socket.io实现简单聊天室案例
2018/01/02 Javascript
js实现左右两侧浮动广告
2018/07/09 Javascript
Vue Echarts实现可视化世界地图代码实例
2019/05/07 Javascript
vue router 跳转时打开新页面的示例方法
2019/07/28 Javascript
[00:12]2018DOTA2亚洲邀请赛 sylar表现SOLO技艺
2018/04/06 DOTA
opencv实现图片模糊和锐化操作
2018/11/19 Python
详解如何在Apache中运行Python WSGI应用
2019/01/02 Python
python字符串替换第一个字符串的方法
2019/06/26 Python
python上下文管理器异常问题解决方法
2021/02/07 Python
canvas版人体时钟的实现示例
2021/01/29 HTML / CSS
捷克母婴用品购物网站:Feedo.cz
2020/12/28 全球购物
"引用"与指针的区别是什么
2016/09/07 面试题
仓库班组长岗位职责
2013/12/12 职场文书
总经理秘书的岗位职责
2013/12/27 职场文书
会计出纳员的自我评价
2014/01/15 职场文书
学校安全教育制度
2014/01/31 职场文书
体育教师求职信
2014/05/24 职场文书
2014年乡镇领导个人整改措施
2014/09/19 职场文书
泸县召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
医院保洁员岗位职责
2015/02/13 职场文书
房地产公司财务总监岗位职责
2015/04/03 职场文书
大学生饮品店创业计划书范文
2019/07/10 职场文书
Appium中scroll和drag_and_drop根据元素位置滑动
2022/02/15 Python