本文介绍了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);
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
Angular8引入百度Echarts进行图表分析的实现代码
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
angular inputNumber指令输入框只能输入数字的实现
网友评论