详细AngularJs4的图片剪裁组件的实例

本文介绍了angularjs4的图片剪裁组件，下面我来记录一下,有需要了解angularjs4的图片剪裁组件的朋友可参考。希望此文章对各位有所帮助。

jquery里有一个强大的图片剪裁插件，叫cropper.js。这是大神的github地址：

首先想在全是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);
 }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。