欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-05-14 19:25:01
本文介绍了angularjs4的图片剪裁组件,下面我来记录一下,有需要了解angularjs4的图片剪裁组件的朋友可参考。希望此文章对各位有所帮助。 jquery里有...

本文介绍了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);
 }

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