fix(img-cropper): fix when a second image is loaded with the same dim…

…ensions as the previous one
A-l-y-l-e · Nov 14, 2018 · 87306d3 · 87306d3
1 parent e56bb14
commit 87306d3
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 25 deletions.
diff --git a/...mo/resizing-cropping-images-example-01/resizing-cropping-images-example-01.component.html b/...mo/resizing-cropping-images-example-01/resizing-cropping-images-example-01.component.html
@@ -1,4 +1,4 @@
-<div [withClass]="classes.actions">
+<div [className]="classes.actions">
   <button ly-button color="primary" (click)="_fileInput.click()">
     <ly-icon>image</ly-icon>
     <span>Select File</span>
@@ -8,15 +8,18 @@
   <input #_fileInput type="file" (change)="cropping.selectInputEvent($event)" accept="image/*" hidden>
   <button raised ly-button bg="accent" *ngIf="cropping.isCropped">Upload</button>
 </div>
+
 <div *ngIf="cropping.isLoaded">
   <button (click)="cropping.zoomIn()" ly-icon-button><ly-icon>zoom_in</ly-icon></button>
   <button (click)="cropping.zoomOut()" ly-icon-button><ly-icon>zoom_out</ly-icon></button>
   <button (click)="cropping.center()" ly-icon-button><ly-icon>filter_center_focus</ly-icon></button>
   <button (click)="cropping.rotate(-90)" ly-icon-button><ly-icon>rotate_90_degrees_ccw</ly-icon></button>
-  <button (click)="cropping.fit()" ly-button>fit</button>
-  <button (click)="cropping.fitToScreen()" ly-button>fit to screen</button>
+  <button (click)="cropping.fit()" ly-button>Fit</button>
+  <button (click)="cropping.fitToScreen()" ly-button>Fit to screen</button>
   <button (click)="cropping.setScale(1)" ly-button>1:1</button>
+  <button (click)="cropping.clean()" ly-button>Clean</button>
 </div>
+
 <ly-cropping [withClass]="classes.cropping" #cropping
 [config]="myConfig"
 [(scale)]="scale"
@@ -25,10 +28,13 @@
 (error)="onerror($event)">
   <span>Drag and drop image</span>
 </ly-cropping>
+
 <div *ngIf="cropping.isLoaded" [className]="classes.range">
   <input type="range" [className]="classes.rangeInput" [attr.min]="cropping.minScale" max="1" [(ngModel)]="scale" step="any">
 </div>
+
 <button *ngIf="cropping.isLoaded" color="accent" (click)="cropping.crop()" ly-button>
   <ly-icon>crop</ly-icon>crop
 </button>
+
 <div><img *ngIf="cropping.isCropped" [src]="croppedImage"></div>
diff --git a/src/lib/resizing-cropping-images/resizing-cropping-images.ts b/src/lib/resizing-cropping-images/resizing-cropping-images.ts
@@ -230,9 +230,10 @@ export class LyResizingCroppingImages {
     if (imgElement) {
       this._img = imgElement;
       const canvas = this._imgCanvas.nativeElement;
-      canvas.height = imgElement.height;
       canvas.width = imgElement.width;
+      canvas.height = imgElement.height;
       const ctx = canvas.getContext('2d');
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
       ctx.drawImage(imgElement, 0, 0);
       /** set zoom scale */
       const minScale = {
@@ -275,15 +276,17 @@ export class LyResizingCroppingImages {
   }
 
   selectInputEvent(img: Event) {
+    console.log('from event');
     const _img = img.target as HTMLInputElement;
     if (_img.files.length !== 1) {
       return;
     }
     const fileReader: FileReader = new FileReader();
+
     this._fileName = _img.value.replace(/.*(\/|\\)/, '');
 
+
     /** Set type */
-    this._defaultType = null;
     if (!this.config.type) {
       this._defaultType = _img.files[0].type;
     }
@@ -301,32 +304,35 @@ export class LyResizingCroppingImages {
     size = size >= this.minScale && size <= 1 ? size : this.minScale;
 
     // check
-    const changed = size === this.scale;
+    const changed = size !== this.scale;
     this._scale = size;
-    if (changed) {
-      return;
-    }
-
     size = this._scal3Fix = size;
-    if (!this.isLoaded) {
+    if (this.isLoaded) {
+      if (changed) {
+        const originPosition = {...this._imgRect};
+        this.offset = {
+          x: originPosition.x,
+          y: originPosition.y,
+          left: originPosition.xc,
+          top: originPosition.yc
+        };
+        this._setStylesForContImg({});
+        this._move({
+          srcEvent: {},
+          deltaX: 0,
+          deltaY: 0
+        });
+      } else {
+        return;
+      }
+    } else if (this.minScale) {
       this._setStylesForContImg({
         ...this._getCenterPoints()
       });
     } else {
-      const originPosition = {...this._imgRect};
-      this.offset = {
-        x: originPosition.x,
-        y: originPosition.y,
-        left: originPosition.xc,
-        top: originPosition.yc
-      };
-      this._setStylesForContImg({});
-      this._move({
-        srcEvent: {},
-        deltaX: 0,
-        deltaY: 0
-      });
+      return;
     }
+
     this.scaleChange.emit(this._scale);
     if (!noAutoCrop) {
       this._cropIfAutoCrop();
@@ -452,6 +458,12 @@ export class LyResizingCroppingImages {
 
   /** Clean the img cropper */
   clean() {
+    this._imgRect = { } as any;
+    this.offset = null;
+    this.scale = null;
+    this._scal3Fix = null;
+    this._rotation = 0;
+    this._minScale = null;
     this._defaultType = null;
     this._isLoadedImg = false;
     this.isLoaded = false;
@@ -482,6 +494,7 @@ export class LyResizingCroppingImages {
 
   /** Set Img */
   setImageUrl(src: string) {
+    this.clean();
     this._originalImgBase64 = src;
     const img = new Image;
     const cropEvent: ImgCropperEvent = {
@@ -498,7 +511,6 @@ export class LyResizingCroppingImages {
     };
     img.src = src;
     img.addEventListener('error', () => {
-      this.clean();
       this.error.emit(cropEvent);
     });
     img.addEventListener('load', () => {