当前位置：首页 > 资讯 > 技术文档

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

时间：2021-03-25 02:39 编辑：来源：阅读：
扫一扫，手机访问

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

本文介绍了AngularJs4的图片剪裁组件，下面我来记录一下,有需要了解AngularJs4的图片剪裁组件的朋友可参考。希望此文章对各位有所帮助。 jQuery里有一个强大的图片剪裁插件，叫cropper.js。这是大神的GitHub地址：[url=https://github.com/fengyuanchen/cropper]https://github.com/fengyuanchen/cropper[/url] 首先想在全是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的文件，里面有示例：[url=https://github.com/DefinitelyTyped/DefinitelyTyped]https://github.com/DefinitelyTyped/DefinitelyTyped[/url]，在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
})

[code]import * as Cropper from 'cropperjs';[/code]这个是引用cropper的方式。 [code]encapsulation: ViewEncapsulation.None [/code]因为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);
 }

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

全部评论(0)

上一篇：深入理解Angularjs中的$resource服务
下一篇：详解angularjs 关于ui-router分层使用

资讯排行榜
更多>>