详细AngularJs4的图片剪裁组件的实例
本文介绍了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); }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- 适用于AngularJs4的图片剪裁组件
- JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例
- asp.net MVC实现无组件上传图片实例介绍
- JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
- AspJpeg组件实现远程图片保存的实例完整代码
- Vue组件开发实例(详细注释)
- jquery.picsign图片标注组件实例详解
- [Android实例教程] 教你如何拍照+相册选择图片+剪裁图片完整实现
- BootStrap 图片样式、辅助类样式和CSS组件的实例详解
- 微信小程序 icon组件详细及实例代码
- asp.net MVC实现无组件上传图片实例介绍
- JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
- iOS手动剪裁图片并保存到相册的详细代码
- vue.js指令和组件详细介绍及实例
- vue.js实例对象+组件树的详细介绍
- 利用Vue实现移动端图片轮播组件的方法实例
- Bootstrap图片轮播组件使用实例解析
- 基于Node的React图片上传组件实现实例代码
- Joomla!扩展制作实例教程-模板展示组件-增加后台上传图片功能 【转】
- android Gallery组件实现的iPhone图片滑动效果实例