详细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);
}
上一篇：详解@angular/cli 改变默认启动端口两种方式
栏 目：AngularJS
下一篇：Angular的Bootstrap(引导)和Compiler(编译)机制
本文地址：http://www.codeinn.net/misctech/23658.html
