Tips for retrieving a cropped image with Croppr.js

Question

Tips for retrieving a cropped image with Croppr.js

Currently, I am developing a mobile application using Ionic 3. Within the application, I have integrated the Croppr.js library to enable image cropping before uploading it to the server. However, I am facing an issue where I am unable to retrieve the cropped image after using the library. Here is the code snippet that I have experimented with:

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"/>

The problem lies in the fact that the onCropEnd method only provides me with the dimensions of the cropped image and not the actual cropped image itself. Does anyone have any insights on how I can extract the cropped image as either a File or a base64 string?

javascript angular typescript ionic3

Answer 1

Answer №1

In case you are utilizing ionic 3, the "@ionic-native/crop": "^4.7.0" plugin is available for image cropping. I have personally employed this plugin for image cropping in my ionic 3 projects.

Furthermore, I have experience with implementing image cropping features in angular using the "ng2-img-cropper" plugin. Feel free to refer to the sample code snippet below which demonstrates how this can be done in an angular project.
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;
    }

  // For selecting an 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 actual image
     var base64Blob = this.dataURItoBlob( file );

   /**
     * Utility 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>

Answer 2

In case you are utilizing ionic 3, the "@ionic-native/crop": "^4.7.0" plugin is available for image cropping. I have personally employed this plugin for image cropping in my ionic 3 projects.

Furthermore, I have experience with implementing image cropping features in angular using the "ng2-img-cropper" plugin. Feel free to refer to the sample code snippet below which demonstrates how this can be done in an angular project.
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;
    }

  // For selecting an 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 actual image
     var base64Blob = this.dataURItoBlob( file );

   /**
     * Utility 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>

Answer 3

Answer №2

Resolved the issue.

onCropFinish(coordinates: { x: number, y: number, width: number, height: number }): void {
    console.log("Cropping finished with coordinates: ", coordinates);

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

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

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

    console.log("data url of cropped image", imageDataUrl)
  }

Answer 4

Resolved the issue.

onCropFinish(coordinates: { x: number, y: number, width: number, height: number }): void {
    console.log("Cropping finished with coordinates: ", coordinates);

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

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

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

    console.log("data url of cropped image", imageDataUrl)
  }

Tips for retrieving a cropped image with Croppr.js

Answer №1

Answer №2

Similar questions

Having trouble changing file names in a Next.js 13 project

The value 'true' was returned for an attribute 'exact' that is not of boolean type

Instructions for adding a select dropdown feature in Angular 6 that includes a search filter. Additionally, tips on how to filter objects by their name property

What could be the issue with this particular Ajax script?

How can we eliminate duplicate objects in a JavaScript array by comparing their object keys?

How can progress bars be animated using CSS or JavaScript?

Methods used on a server and methods used on a client-side application

how to choose the :after pseudo-element with jQuery

Vue and Summernote issue: Model content doesn't display in form when loaded from database

Ways to elegantly replace an object with thorough validation of its embedded properties

Utilizing Angular with the development environment of Visual Studio 2015

Ways to develop a dynamic HTML TransferBox featuring a custom attribute

Leverage the power of an Angular component for repeated

Steps for deactivating a textbox upon checkbox activation

Incorporating a complex React (Typescript) component into an HTML page: A Step-by

What is the best way to disconnect an ngFor loop from its original context and reconnect it to a wrapping component's context when utilized as projected content?

Trouble arises with Webpack during the compilation of JavaScript files

Saving a complicated schema in Node using Mongoose fails to save or update when encountering an error

Separate your objects with RXJS groupBy Observable<<Object[]>

Experience the magic of MFA Firebase combined with the seamless flow of React