本文介绍了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,就能看到一个例子,长这样:
var 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
@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方法,就能完成换图片显示了。
$event 是整个事件对象。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。
原文地址:https://www.jb51.cc/js/37928.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。