适用于AngularJs4的图片剪裁组件
2017-07-11 18:13
204 查看
jQuery里有一个强大的图片剪裁插件,叫cropper.js。这是大神的GitHub地址:https://github.com/fengyuanchen/cropper
首先想在全是ts文件的angular里运用jQuery的js代码插件,这时候需要一个东西,他叫桥接文件。npm是一个强大的库,已经有前人在里面封装了cropper以及所有你能想到想不到的插件,你需要做的只是安装上就好了。需要在webstorm的Terminal里敲
忘了说 在@types下有一个叫index.d.ts的文件,里面有示例:https://github.com/DefinitelyTyped/DefinitelyTyped,在types下搜cropper,有个文件cropperjs-tests.ts,就能看到一个例子,长这样:
接下来就可以写代码啦啦啦啦~~
创建一个component
想要实现点击一个按钮,弹出一个框让你选图片,需要做的是写一个change事件,获取到选中图片的路径,然后运用cropper里的替换路径的replace方法,就能完成换图片显示了。
$event 是整个事件对象。
接下来就可以添加自己需要的功能了,比如说向右旋转90度。
以上~
希望自己早日变大神,看过这篇文章的也都变大神 哈哈哈
首先想在全是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的图片剪裁组件的实例
- 无组件上传图片到数据库中
- 无组件图片与文本同步存入数据库的最简单的办法
- ASP中取得图片宽度和高度的类(无组件)
- 用ASPJPEG组件制作图片的缩略图和加水印
- 用ASPJPEG组件制作图片的缩略图和加水印
- ASP中取得图片宽度和高度的类(无组件)
- 用正则解析图片地址,并利用XMLHTTP组件将其保存
- 无组件生BMP图片验证码
- 图象工具:可将SWING组件外观输出成图片的工具 - SWING组件
- 无组件上传图片到数据库中,最完整解决方案
- ASP中取得图片宽度和高度的类(无组件)
- ASP中取得图片宽度和高度的类(无组件)
- 图片上传自动生成缩略图VB组件!
- IronSoft文件上传图片处理组件(铁匠作品)
- 无组件上传图片至SQLSERVER数据库(示例)
- 无组件上传图片到数据库源码
- 无组件上传图片之文件采用方案
- ASP中取得图片宽度和高度的类(无组件)
- ASP中取得图片宽度和高度的类(无组件)