如何使用 Cropper.js 获取裁剪后的图像？答案

【问题标题】：How to get the croped image using Croppr.js?如何使用 Cropper.js 获取裁剪后的图像？
【发布时间】：2018-12-12 08:21:03
【问题描述】：

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

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 字符串输出？

【问题讨论】：

标签： javascript angular typescript ionic3

【解决方案1】：

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>

【讨论】：

【解决方案2】：

找到了解决办法。

onCropEnd(data: { x: number, y: number, width: number, height: number }): void {
    console.log("On Crop End: ", data);

    const canvas = <HTMLCanvasElement>document.getElementById('myCanvas'),
      context = canvas.getContext('2d');
    const image = new Image()

    canvas.width = data.width;
    canvas.height = data.height;
    const loadedImg = <HTMLImageElement>document.getElementsByTagName('img')[0]
    image.src = loadedImg.src;

    context.drawImage(image, data.x, data.y, data.width, data.height, 0, 0, canvas.width, canvas.height);
    const dataUrl = canvas.toDataURL('image/jpeg');

    console.log("data url", dataUrl)
  }

【讨论】：