如何使用Croppr.js获取裁剪的图像? [英] How to get the croped image using Croppr.js?

问题描述

我正在研究Ionic 3移动应用程序.在这里，我使用 Croppr.js 库来裁剪图像在上传到服务器之前.但是我找不到获取裁剪图像的方法.这是我尝试过的代码

I'm working on an Ionic 3 mobile application. In there I'm using Croppr.js library to crop the images before uploading to the server. But I couldn't find a way to get the cropped image. This is the code that I have tried

index.html

<link href="assets/css/croppr.min.css" rel="stylesheet" />
<script src="assets/js/croppr.min.js"></script>

profile.component.ts

ionViewDidLoad() {
    this._croppr = new Croppr('#croppr', {
      maxSize: [512, 512, 'px'],
      minSize: [128, 128, 'px'],
      onCropStart: this.onCropStart,
      onUpdate: this.onCropUpdate,
      onCropEnd: this.onCropEnd
    })
  }

  onCropEnd(data): void {
    console.log("On Crop End: ", data);
  }

  onCropUpdate(data) {
    console.log("On Crop Update: ", data);
  }

  onCropStart(data) {
    console.log("crop start: ", data)
  }

home.component.html

<img src="path/to/image.jpg" id="croppr"/>

此onCropEnd方法仅返回裁剪图像的尺寸.不是裁剪的图像.有谁知道如何以 File 或 base64 字符串的形式获取裁剪的图像?

This onCropEnd method only returns the dimensions of the cropped image. not the cropped image. Any knows how to get the cropped image out as File or base64 string ?

推荐答案

If you are using ionic 3, then you can use @ionic-native/crop": "^4.7.0" plugin for image crop. I have used this plugin for image crop in ionic 3.

I have also used image cropping functionality in angular using "ng2-img-cropper" plugin. Refer below code which is used in angular project this will help you.
demo.ts :
import {ImageCropperComponent, CropperSettings, Bounds} from 'ng2-img-cropper';

 @ViewChild('cropper', undefined)
    cropper:ImageCropperComponent;  

constructor( private cropperSettings: CropperSettings ) {
        this.cropperSettings = new CropperSettings();
        this.cropperSettings.noFileInput = true;
    }

  // To browse image 
   fileChangeListener($event) {
        var image:any = new Image();
        var file:File = $event.target.files[0];
        var myReader:FileReader = new FileReader();
        var that = this;
        this.isfileOpen = true;
        myReader.onloadend = function (loadEvent:any) {
            image.src = loadEvent.target.result;
            that.cropper.setImage(image);
        };
        myReader.readAsDataURL(file);
    }

  //convert cropped base64 image to image
     var base64Blob = this.dataURItoBlob( file );

   /**
     * Function to convert base64 image 
    **/
    dataURItoBlob = ( dataURI ) => {
        var binary = atob( dataURI.split( ',' )[1] );
        var array = [];
        for ( var i = 0; i < binary.length; i++ ) {
            array.push( binary.charCodeAt( i ) );
        }
        return new Blob( [new Uint8Array( array )], { type: 'image/jpeg' } );
    }

demo.html :
<img-cropper #cropper [hidden]="!isfileOpen" [image]="data" [settings]="cropperSettings"></img-cropper> 
       <br>
       <div class="file-upload"  *ngIf="!isfileOpen">
         <input id="custom-input" accept="image/*" class="textCenter" type="file" (change)="fileChangeListener($event)">
       </div>

这篇关于如何使用Croppr.js获取裁剪的图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！