Fixed some errors

Author: MickL

README.md

@@ -36,10 +36,11 @@ npm i ts-image-processor -S
 ```
 import { getBlobForFile, imageProcessor, resize, sharpen, output } from 'ts-image-processor';
 
-// Optionally convert File-object to blob (base64-string), e.g. if you have a file from <input>
+// If you have a file from <input>, convert it to base64-string first
 getBlobForFile(file).then(base64 => {
   // Use any of the functions with an existing blob (base64-string)
-  imageProcessor.src(base64)
+  imageProcessor
+    .src(base64)
     .pipe(
       resize({maxWidth: 800, maxHeight: 800}),
       sharpen(),

demo/src/app/app.component.html

@@ -52,8 +52,8 @@ <h3>Resize & sharpen</h3>
         </div>
 
         <div class="col-12 col-md-6">
-          <ng-container *ngIf="resizeIsLoading || resizeImgResult">
-            <small *ngIf="resizeIsLoading">Processing...</small>
+          <ng-container *ngIf="resizeIsProcessing || resizeImgResult">
+            <small *ngIf="resizeIsProcessing">Processing...</small>
             <ng-container *ngIf="resizeImgResult">
               <img [src]="resizeImgResult" alt="source" class="img-fluid">
               <div *ngIf="resizeProcessingTime">
@@ -97,8 +97,8 @@ <h3>Rotate & mirror</h3>
           </div>
         </div>
         <div class="col-12 col-md-6">
-          <ng-container *ngIf="rotateIsLoading || rotateImgResult">
-            <small *ngIf="resizeIsLoading">Processing...</small>
+          <ng-container *ngIf="rotateIsProcessing || rotateImgResult">
+            <small *ngIf="rotateIsProcessing">Processing...</small>
             <ng-container *ngIf="rotateImgResult">
               <img [src]="rotateImgResult" alt="source" class="img-fluid">
               <div *ngIf="rotateProcessingTime">

demo/src/app/app.component.ts

@@ -4,6 +4,7 @@ import {
   resize,
   sharpen,
   rotate,
+  mirror,
   output,
   imageProcessor,
   applyExifOrientation,
@@ -22,10 +23,10 @@ export class AppComponent implements OnInit {
 
   applyExifOrientation: boolean;
   resizeImgResult: string;
-  resizeIsLoading: boolean;
+  resizeIsProcessing: boolean;
   resizeProcessingTime: number;
   rotateImgResult: string;
-  rotateIsLoading: boolean;
+  rotateIsProcessing: boolean;
   rotateProcessingTime: number;
 
   onFileInputChange(file: File) {
@@ -68,10 +69,11 @@ export class AppComponent implements OnInit {
       return;
     }
 
-    this.resizeIsLoading = true;
-    const t0             = performance.now();
+    this.resizeIsProcessing = true;
+    const t0                = performance.now();
 
-    imageProcessor.src(this.srcBase64)
+    imageProcessor
+      .src(this.srcBase64)
       .pipe(
         resize({
           maxWidth:  +maxWidth,
@@ -84,31 +86,45 @@ export class AppComponent implements OnInit {
       ).then(resultBase64 => {
         const t1                  = performance.now();
         this.resizeProcessingTime = Math.round((t1 - t0) * 100) / 100;
-        this.resizeIsLoading      = false;
+        this.resizeIsProcessing   = false;
         this.resizeImgResult      = resultBase64;
       },
     )
     ;
   }
 
   onRotate() {
-    // const t0 = performance.now();
-    //
-    // rotate(this.rotateImgResult).then(blob => {
-    //   const t1 = performance.now();
-    //   this.rotateProcessingTime = Math.round((t1 - t0) * 100) / 100;
-    //   this.rotateImgResult = blob;
-    // });
+    const t0 = performance.now();
+
+    imageProcessor
+      .src(this.rotateImgResult)
+      .pipe(
+        rotate(),
+        output(),
+      )
+      .then(base64 => {
+        const t1 = performance.now();
+        this.rotateProcessingTime = Math.round((t1 - t0) * 100) / 100;
+        this.rotateImgResult = base64;
+      })
+    ;
   }
 
   onMirror() {
-    // const t0 = performance.now();
-    //
-    // mirror(this.rotateImgResult).then(blob => {
-    //   const t1 = performance.now();
-    //   this.rotateProcessingTime = Math.round((t1 - t0) * 100) / 100;
-    //   this.rotateImgResult = blob;
-    // });
+    const t0 = performance.now();
+
+    imageProcessor
+      .src(this.rotateImgResult)
+      .pipe(
+        mirror(),
+        output(),
+      )
+      .then(base64 => {
+        const t1 = performance.now();
+        this.rotateProcessingTime = Math.round((t1 - t0) * 100) / 100;
+        this.rotateImgResult = base64;
+      })
+    ;
   }
 
   ngOnInit() {

src/lib/operators/mirror.ts

@@ -4,7 +4,7 @@ import { base64ToImgElement } from '../utils';
 
 // Need img/canvas source
 // Need width/height
-function mirror(): OperatorFunction {
+export function mirror(): OperatorFunction {
   return (base64: string) => {
     return new Promise(resolve => {
       base64ToImgElement(base64).then(image => {

src/lib/operators/rotate.ts

@@ -11,12 +11,15 @@ import { base64ToImgElement } from '../utils';
 export function rotate(options: RotateOptions = {}): OperatorFunction {
   return (base64: string) => {
     return new Promise<string>(resolve => {
+      const t0 = performance.now();
       base64ToImgElement(base64).then(image => {
         CanvasService.setSize(image.height, image.width);
         CanvasService.canvasCtx.rotate(90 * Math.PI / 180);
         CanvasService.canvasCtx.translate(0, -CanvasService.canvas.width);
         CanvasService.canvasCtx.drawImage(image.imgElement, 0, 0);
+        const t1 = performance.now();
         resolve(CanvasService.canvas.toDataURL());
+        console.log(t1-t0);
       });
     });
   };