I developed a cropper based on ngx-image-cropper which allows to crop/rotate some images. For the demo of the sprint, I want the images to be displayed when the application is starting, so I need to initiate the images on ngx-image-cropper without calling the fileChangeEvent() event.

This is the actual result , it works fine.

I click on one of the links ( Photo - Signature - ... ) and the file Uploader is opened to choose a photo to crop.

This is what i want to :

when accessing the page in the begining, load a file from my disk without clicking on the link.

Ps : I m using Angular 8

And here the code of the cropper :

       <mat-card-content style="padding:3% 5%; text-align: center; ">
          <image-cropper [ngClass]=" loaded && showCropper && !cropped ? 'showCropper' : 'hideCropper' "
            [imageChangedEvent]="imageChangedEvent"
            [maintainAspectRatio]="false"
            [containWithinAspectRatio]="containWithinAspectRatio"
            [aspectRatio]="5 / 3"
            [cropperMinWidth]="128"
            [onlyScaleDown]="true"
            [roundCropper]="false"
            [canvasRotation]="canvasRotation"
            [transform]="transform"
            [alignImage]="'center'"
            [style.display]="showCropper ? null : 'none'"
            format="png"
            (imageCropped)="imageCropped($event)"
            (imageLoaded)="imageLoaded()"
            (cropperReady)="cropperReady($event)"
            (loadImageFailed)="loadImageFailed()"
          >
          </image-cropper>
          <img
            *ngIf="loaded && !showCropper && cropped"
            class="document-photo"
            [src]="croppedImage"
          />
          <div *ngIf="!loaded" class="divNone"></div>
          <div class="icon-image">
            <mat-icon (click)="rotateLeft()">rotate_left</mat-icon>
            <mat-icon (click)="rotateRight()">rotate_right</mat-icon>
            <mat-icon (click)="activateCrop()">crop</mat-icon>
            <mat-icon (click)="clearImage()">clear</mat-icon>
            <mat-icon (click)="validate()">check</mat-icon>
            <mat-icon>note_add</mat-icon>
          </div>
        </mat-card-content>

        <mat-list-item class="item-doc text-blue-in">
              <mat-icon class="icon-info" matTooltipPosition="above" matTooltip="Info about the photo">info</mat-icon>
              <mat-icon *ngIf="!photo" class="text-grey-in">check_box_outline_blank</mat-icon>
              <mat-icon *ngIf="photo" class="text-grey-in">check_box</mat-icon>
              <input style="visibility: hidden; display: none;" #linkPhoto type="file" (change)="fileChangeEvent($event, 'photo')"/>
              <mat-label class="doc-title text-grey-in" (click)="onLoadPhoto()" >Photo</mat-label>
              <mat-icon *ngIf="photoSent" class="icon-edit" (click)="editPhoto()">edit</mat-icon                  >
        </mat-list-item>

So the question is : How to load image from disk in the ngx-image-cropper without calling the fileChangedEvent ?

I developed a cropper based on ngx-image-cropper which allows to crop/rotate some images. For the demo of the sprint, I want the images to be displayed when the application is starting, so I need to initiate the images on ngx-image-cropper without calling the fileChangeEvent() event.

This is the actual result , it works fine.

I click on one of the links ( Photo - Signature - ... ) and the file Uploader is opened to choose a photo to crop.

This is what i want to :

when accessing the page in the begining, load a file from my disk without clicking on the link.

Ps : I m using Angular 8

And here the code of the cropper :

       <mat-card-content style="padding:3% 5%; text-align: center; ">
          <image-cropper [ngClass]=" loaded && showCropper && !cropped ? 'showCropper' : 'hideCropper' "
            [imageChangedEvent]="imageChangedEvent"
            [maintainAspectRatio]="false"
            [containWithinAspectRatio]="containWithinAspectRatio"
            [aspectRatio]="5 / 3"
            [cropperMinWidth]="128"
            [onlyScaleDown]="true"
            [roundCropper]="false"
            [canvasRotation]="canvasRotation"
            [transform]="transform"
            [alignImage]="'center'"
            [style.display]="showCropper ? null : 'none'"
            format="png"
            (imageCropped)="imageCropped($event)"
            (imageLoaded)="imageLoaded()"
            (cropperReady)="cropperReady($event)"
            (loadImageFailed)="loadImageFailed()"
          >
          </image-cropper>
          <img
            *ngIf="loaded && !showCropper && cropped"
            class="document-photo"
            [src]="croppedImage"
          />
          <div *ngIf="!loaded" class="divNone"></div>
          <div class="icon-image">
            <mat-icon (click)="rotateLeft()">rotate_left</mat-icon>
            <mat-icon (click)="rotateRight()">rotate_right</mat-icon>
            <mat-icon (click)="activateCrop()">crop</mat-icon>
            <mat-icon (click)="clearImage()">clear</mat-icon>
            <mat-icon (click)="validate()">check</mat-icon>
            <mat-icon>note_add</mat-icon>
          </div>
        </mat-card-content>

        <mat-list-item class="item-doc text-blue-in">
              <mat-icon class="icon-info" matTooltipPosition="above" matTooltip="Info about the photo">info</mat-icon>
              <mat-icon *ngIf="!photo" class="text-grey-in">check_box_outline_blank</mat-icon>
              <mat-icon *ngIf="photo" class="text-grey-in">check_box</mat-icon>
              <input style="visibility: hidden; display: none;" #linkPhoto type="file" (change)="fileChangeEvent($event, 'photo')"/>
              <mat-label class="doc-title text-grey-in" (click)="onLoadPhoto()" >Photo</mat-label>
              <mat-icon *ngIf="photoSent" class="icon-edit" (click)="editPhoto()">edit</mat-icon                  >
        </mat-list-item>

So the question is : How to load image from disk in the ngx-image-cropper without calling the fileChangedEvent ?

• javascript
• jquery
• ajax
• angular
• typescript

1 Answer 1

1) if you want instead of selecting an image using the Uploader / open window (from input file) and loading the image from the project directory (with e.g. assets/images) or entering it as a string (base64) you must add one input:

[imageBase64] = "imageBase64String"

where imageBase64String is not (../../assets/image.jpg)

but the value of base64 (date:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQA.....)

2) The author writes that:

"All inputs are optional. Either the imageChangedEvent, imageBase64 or imageFile should be set to load an image into the cropper."

And

Input imageBase64 (string):

"If you don't want to use a file input, you can set a base64 image directly and it will be loaded into the cropper"

3) To not have an error in the console:

"ERROR Error: Uncaught (in promise): Event: {" isTrusted ": true}"

The best addition is ngIf (all might look like this):

<image-cropper
  *ngIf="imageBase64String"
  [imageChangedEvent]="imageChangedEvent"
  [imageBase64]="imageBase64String"
  ...
  ></image-cropper>

4) And how to add base64?

You can create a function e.g. getBase64FromFile(img) {...} and do it using XMLHttpRequest() + FileReader() and assign the result to this.imageBase64String = (base64 as any).result

when ngx-image-cropper loads, e.g.

ngAfterViewInit (): void {
  this.getBase64FromFile('../../assets/image.jpg');
}

See, It's interesting here http://www.programmersought./article/52582038406/