Is there a way to load an image onto the ngx-image-cropper without triggering the imageChangedEvent event?

Question

Is there a way to load an image onto the ngx-image-cropper without triggering the imageChangedEvent event?

My latest project involved creating a custom cropper using ngx-image-cropper, which allows for cropping and rotating images. For the sprint demo, I needed the images to be displayed as soon as the application loads without having to trigger the fileChangeEvent() event in ngx-image-cropper.

The current outcome is functioning perfectly.

By clicking on one of the links (Photo - Signature - ...), the file uploader opens up allowing me to choose a photo to crop.

https://i.sstatic.net/83Rtv.png

This is what I aim to achieve:

Upon accessing the page initially, load a file directly from my disk without needing to click on any link.

https://i.sstatic.net/zEiKF.png

Note: I am working with Angular 8.

Below is the code snippet for the image 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, my question is: How can I load an image from my disk into ngx-image-cropper without triggering the fileChangedEvent?

javascript jquery ajax angular typescript

Answer 1

Answer №1

1) To choose an image differently than the usual method of selecting from the Uploader or input file window, consider loading the image from a specific directory within the project (such as assets/images) or inputting it directly as a base64 string. Add the following input:

[imageBase64] = "imageBase64String"

The value of imageBase64String should not be (../../assets/image.jpg), but rather the actual base64 value:

(date:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQA.....)

2) According to the author:

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

Additionally,

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 prevent console errors:

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

It is recommended to use ngIf (the implementation could be like this):

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

4) How to add base64 data?

You can create a function e.g. getBase64FromFile(img) {...}, utilize XMLHttpRequest() + FileReader() to obtain the base64 value, and then assign it to

this.imageBase64String = (base64 as any).result

when ngx-image-cropper initializes, for example.

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

Interesting details can be found here

Answer 2

1) To choose an image differently than the usual method of selecting from the Uploader or input file window, consider loading the image from a specific directory within the project (such as assets/images) or inputting it directly as a base64 string. Add the following input:

[imageBase64] = "imageBase64String"

The value of imageBase64String should not be (../../assets/image.jpg), but rather the actual base64 value:

(date:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQA.....)

2) According to the author:

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

Additionally,

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 prevent console errors:

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

It is recommended to use ngIf (the implementation could be like this):

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

4) How to add base64 data?

You can create a function e.g. getBase64FromFile(img) {...}, utilize XMLHttpRequest() + FileReader() to obtain the base64 value, and then assign it to

this.imageBase64String = (base64 as any).result

when ngx-image-cropper initializes, for example.

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

Interesting details can be found here

Is there a way to load an image onto the ngx-image-cropper without triggering the imageChangedEvent event?

The current outcome is functioning perfectly.

This is what I aim to achieve:

Answer №1

Similar questions

Modules failing to load in the System JS framework

AngularJS - UI Bootstrap: Easily expand or collapse all items in the Accordion widget

The query does not produce a match when using the LIKE operator with the retrieved ajax data

What is the best way to implement autoplay sound on a JavaScript webpage?

The Ember.run.throttle method is not supported by the Object Function as it does not have a throttle method within the Ember.Mixin

simultaneous window access

How to avoid property sharing in Angular recursive components

JQuery error: Unsupported property or method for converting to lowercase

Can you explain the distinction between using tsserver and eslint for linting code?

The Redux Toolkit Slice Reducer fails to function properly when incorporating an extra Reducer that is not compatible

Encountering an ng build error while attempting to include a factory in the providers array

How to create a see-through background using three.js

Has anyone tried integrating Reveal JS with Angular 8?

Requiring addresses for Google Maps in order to display directions

When validating an array in JavaScript, it is important to note that not all elements may be displayed. Only the last variable of each element will

Tips on manually refreshing AngularJS view using ControllerAs syntax?

Detecting repeated keys in a query for a REST connector in loopback

What happens to the parent scope in Javascript when declaring a subclass and why does it get overridden?

Utilizing MVC3 to make an Ajax call in Jquery to store data in a database

Repairing the Performance of the 'Save' Feature