Angular中ngx-image-cropper图片裁剪的使用

GitHub示例源码地址：https://github.com/luoruiemail/ngx-image-cropper

下载下来之后，执行yarn install安装相关node_modules包

然后在目录执行npm start 浏览器中访问http://localhost:4200/ 就可以看到示例效果了 ↓

代码如下↓

将_{ImageCropperModule}添加到模块的导入中，若未安装此包，在_{Windows PowerShell}中执行_{yarn add ngx-image-cropper} 即可

 import { BrowserModule } from '@angular/platform-browser';

 import { NgModule } from '@angular/core';

 import { AppComponent } from './app.component';

 import { ImageCropperjsComponent } from './cropperjs/image-cropperjs/image-cropperjs.component';

 import { ImageCropperModule } from 'ngx-image-cropper';

 @NgModule({

   declarations: [

     AppComponent,

     ImageCropperjsComponent

   ],

   imports: [

     BrowserModule, ImageCropperModule

   ],

   providers: [],

   bootstrap: [AppComponent]

 })

 export class AppModule { }

页面代码↓

 <div id="container1">

     <img id="image" style="display: none" src="../../../assets/image/chelun.gif">

     <input type="file" (change)="fileChangeEvent($event)" />

     <image-cropper [imageChangedEvent]="imageChangedEvent" [imageBase64]="base64String" [maintainAspectRatio]="true" [aspectRatio]="1 / 1" [resizeToWidth]="" resizeToHeight="" format="png" (imageCropped)="imageCropped($event)" (imageLoaded)="imageLoaded()"

         (cropperReady)="cropperReady()" (loadImageFailed)="loadImageFailed()"></image-cropper>

     <img [src]="croppedImage" />

 </div>

 import { Component, OnInit, AfterViewInit, ViewEncapsulation } from '@angular/core';

 // import Cropper from 'cropperjs';

 import { ImageCroppedEvent } from 'ngx-image-cropper';

 @Component({

   selector: 'app-image-cropperjs',

   templateUrl: './image-cropperjs.component.html',

   //styleUrls: ['./image-cropperjs.component.css']

   encapsulation: ViewEncapsulation.None

 })

 export class ImageCropperjsComponent implements AfterViewInit {

   ngAfterViewInit(): void {

     this.getBase64(`http://${window.location.host}/assets/image/chelun.gif`)

   }

   getBase64(imgUrl) {

     const self = this;

     var xhr = new XMLHttpRequest();

     xhr.open("get", imgUrl, true);

     // 至关重要

     xhr.responseType = "blob";

     xhr.onload = function () {

       if (this.status == ) {

         //得到一个blob对象

         var blob = this.response;

         console.log("blob", blob)

         // 至关重要

         let oFileReader = new FileReader();

         oFileReader.onloadend = function (e) {

           let base64 = e.target;

           self.base64String = (<any>base64).result;

           console.log("方式一》》》》》》》》》", base64)

         };

         oFileReader.readAsDataURL(blob);

         //====为了在页面显示图片，可以删除====

         // var img = document.createElement("img");

         // img.onload = function (e) {

         //   window.URL.revokeObjectURL(img.src); // 清除释放

         // };

         // let src = window.URL.createObjectURL(blob);

         // img.src = src

         // document.getElementById("container1").appendChild(img);

         //====为了在页面显示图片，可以删除====

       }

     }

     xhr.send();

   }

   base64String: any;

   imageChangedEvent: any = '';

   croppedImage: any = '';

   fileChangeEvent(event: any): void {

     debugger

     this.imageChangedEvent = event;

   }

   imageCropped(event: ImageCroppedEvent) {

     this.croppedImage = event.base64;

   }

   imageLoaded() {

     // show cropper

   }

   cropperReady() {

     // cropper ready

   }

   loadImageFailed() {

     // show message

   }

   cropper: any;

   constructor() { }

   ngOnInit() {

   }

   getImgUrl($event) {

     debugger

     let data = window.URL.createObjectURL($event.path[].files[]);

     this.cropper.replace(data);

     console.log($event);

   }

   rotateRight() {

     debugger

     console.log(this.cropper.getData());

     this.cropper.rotate();

   }

 }

示例中 getBase64()方法是加的一个默认图片显示，也可以手动选择文件

通过此示例我们可以做一些图片上传裁剪，修改的操作，保存小图片，非常方便

巴特西

Angular中ngx-image-cropper图片裁剪的使用

最新文章

热门文章