Notable Pottery Manufacturer
    Have ideas to improve npm?Join in the discussion! »

    @ferhado/image-cropper
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.4 • Public • Published

    Image Cropper

    Installation

    npm install @ferhado/image-cropper --save
    

    Usage Example

    app.module.ts

    import { ImageCropperModule } from '@ferhado/image-cropper';
     
    @NgModule({
      // ...
      
      imports: [
        // ...
        ImageCropperModule
      ],
      bootstrap: [AppComponent]
    })
     
    export class AppModule { }

    app.component.ts

    import { Component, OnInit } from '@angular/core';
    import { image2base64 } from '@ferhado/image-cropper';
     
    @Component({
      selector: 'app-root',
      templateUrl: 'app.component.html',
      styles: []
    })
     
    export class AppComponent implements OnInit {
      dataUri;
     
      selectFile(file) {
        image2base64(file, (base64) => {
          this.dataUri = base64;
        })
      }
     
      onCrop(result) {
        console.log(result.base64);
        console.log(result.blob);
      }
     
    }

    app.component.html

    <input type="file" (change)="selectFile($event.target.files[0])">
     
    <!-- format: 'png' | 'jpeg' | 'bmp' | 'webp' | 'ico', default is png -->
    <image-cropper ratio="450x350" [dataURI]="dataUri" format="jpeg" (onCrop)="onCrop($event)" #crop></image-cropper>
     
    <img [src]="crop.result?.base64" height="300" style="margin-top: 20px;">
     

    Install

    npm i @ferhado/image-cropper

    DownloadsWeekly Downloads

    1

    Version

    1.0.4

    License

    MIT

    Unpacked Size

    203 kB

    Total Files

    20

    Last publish

    Collaborators

    • avatar