fully working png and jpg lossless compression for one file

Author: clouless

package.json

@@ -1,6 +1,6 @@
 {
   "name": "kartoffelstampf-client",
-  "version": "1.0.0",
+  "version": "0.1.0",
   "license": "MIT",
   "scripts": {
     "ng": "ng",

src/app/app.component.html

@@ -1,6 +1,6 @@
 <div class="container">
-  <div class="app-logo">
-    <img [src]="logoSrc" class="img-fluid" />
+  <div class="logo">
+    <img [src]="logoSrc" class="logo-img" />
   </div>
   <router-outlet></router-outlet>
 </div>

src/app/app.component.ts

@@ -4,7 +4,9 @@ import { Component } from '@angular/core';
   selector: 'app-root',
   templateUrl: './app.component.html',
   styles: [
-    '.foo {}'
+    '.container { padding:20px; }',
+    '.logo { display: flex; align-items: center; flex-direction: column; margin-bottom:30px;}',
+    '.logo-img { width:60%; max-width:1000px; }',
   ]
 })
 export class AppComponent {

src/app/backend.service.ts

@@ -3,6 +3,7 @@ import {
   KartoffelstampfTerminalOutputEntry,
   KartoffelstampfImageUploadResponse,
   KartoffelstampfImageUploadRequest,
+  KartoffelstampfCompressInstruction,
  } from './types/kartoffelstampf-server';
 import { Observable, Subject, throwError } from 'rxjs';
 import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
@@ -24,16 +25,14 @@ export class BackendService {
 
   constructor(private http: HttpClient) { }
 
-  getDownloadUrl(filePathOnServer: string) {
-    return BackendService.REST_API_DOWNLOAD_URL + '/' + filePathOnServer;
+  getDownloadUrl(temporaryFileName: string, originalFileName: string) {
+    return `${BackendService.REST_API_DOWNLOAD_URL}/${temporaryFileName}/${originalFileName}`;
   }
 
   uploadImage(base64Image: string, type: string) {
-    const sanitizedBase64 = base64Image.replace('data:image/png;base64,', '');
     return this.http.post<KartoffelstampfImageUploadResponse>(
       BackendService.REST_API_UPLOAD_URL, {
-        fileContent: sanitizedBase64,
-        fileType: type
+        contentDataUri: base64Image,
       } as KartoffelstampfImageUploadRequest, httpOptions)
     .pipe(
       catchError((e: HttpErrorResponse) => {
@@ -45,17 +44,11 @@ export class BackendService {
     );
   }
 
-  runCompressPngCommand(filePathOnServer: string): Observable<KartoffelstampfTerminalOutputEntry> {
+  runCompressCommand(compressInstruction: KartoffelstampfCompressInstruction): Observable<KartoffelstampfTerminalOutputEntry> {
     const ws = new WebSocket(BackendService.WEB_SOCKET_COMPRESS_URL);
     const subject = new Subject<KartoffelstampfTerminalOutputEntry>();
     ws.onopen = function (event) {
-      ws.send(JSON.stringify({
-        command: 'optipng',
-        commandArguments: [
-          '-o5',
-          '/u/' + filePathOnServer // e.g. foo.png
-        ]
-      }));
+      ws.send(JSON.stringify(compressInstruction));
     };
     ws.onmessage = function(event: MessageEvent) {
       const kartoffelstampfTerminalOutputEntry: KartoffelstampfTerminalOutputEntry = JSON.parse(event.data);

src/app/terminal-output/terminal-output.component.html

@@ -1,8 +1,3 @@
-<p>
-  terminal-output works!
-  x
-</p>
-
 <div *ngFor="let line of lines; let i=index" class="{{ line.type }}">
   <div [innerHTML]="replaceNewlineWithBr(line.html)"></div>
 </div>

src/app/terminal-output/terminal-output.component.ts

@@ -13,6 +13,14 @@ import { TerminalLine } from '../types/kartoffelstampf-client';
       border-left: 10px solid green;
       font-family: "Lucida Console", Monaco, monospace;
     }`,
+    `.cmd {
+      width: 90%;
+      background-color: #333;
+      color: #fff;
+      padding: 8px;
+      border-left: 10px solid #333;
+      font-family: "Lucida Console", Monaco, monospace;
+    }`,
     `.stderr {
       width: 90%;
       background-color: #555;
@@ -34,13 +42,19 @@ import { TerminalLine } from '../types/kartoffelstampf-client';
 export class TerminalOutputComponent {
 
   linesInternal: TerminalLine[] = [];
+
+  @Input() temporaryFileName: string;
+  @Input() originalFileName: string;
+
   @Output() linesChange = new EventEmitter();
 
   constructor() { }
 
   replaceNewlineWithBr(text: string): string {
     if (text !== undefined && text !== null) {
-      return text.replace(/\n/g, '<br/>');
+      return text
+        .replace(/\n/g, '<br/>')
+        .replace(this.temporaryFileName, this.originalFileName);
     }
     return text;
   }

src/app/types/kartoffelstampf-server.ts

@@ -12,9 +12,17 @@ export interface KartoffelstampfTerminalOutputEntry {
 }
 
 export interface KartoffelstampfImageUploadRequest {
-  fileContent: string;
-  fileType: string;
+  contentDataUri: string;
 }
 export interface KartoffelstampfImageUploadResponse {
   fileName: string;
 }
+
+export class KartoffelstampfCompressInstruction {
+
+  public static COMPRESS_TYPE_LOSSLESS = 'LOSSLESS';
+
+  public compressType: string;
+  public temporaryFileName: string;
+
+}

src/app/upload-page/upload-page.component.html

@@ -1,8 +1,14 @@
 <div class="container">
   <input type="file" (change)="processFileToBase64DataURI($event)">
-  <pre>{{uploadedFileBase64URI}}</pre>
-  <p>{{compressDone}}</p>
+  <p *ngIf="originalFileName && !compressDone!">COMPRESSING PLEASE WAIT ...</p>
+  <p *ngIf="originalFileName && compressDone!">COMPRESSING DONE :)</p>
+  <div *ngIf="originalFileName">
+    <h3>{{originalFileName}}</h3>
+    <app-terminal-output
+      [temporaryFileName]="temporaryFileName"
+      [originalFileName]="originalFileName"
+      [lines]="terminalLines"
+    ></app-terminal-output>
+  </div>
   <a *ngIf="compressDone == true" [href]="getDownloadUrl()">download</a>
-  <h3>Terminal output</h3>
-  <app-terminal-output [lines]="terminalLines"></app-terminal-output>
 </div>

src/app/upload-page/upload-page.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { BackendService } from '../backend.service';
-import { KartoffelstampfTerminalOutputEntry } from '../types/kartoffelstampf-server';
+import { KartoffelstampfTerminalOutputEntry, KartoffelstampfCompressInstruction } from '../types/kartoffelstampf-server';
 import { TerminalLine } from '../types/kartoffelstampf-client';
 import { finalize } from 'rxjs/operators';
 
@@ -14,7 +14,8 @@ export class UploadPageComponent implements OnInit {
 
   terminalLines: TerminalLine[] = [];
   uploadedFileBase64URI: string;
-  compressedFilePath: string;
+  originalFileName: string;
+  temporaryFileName: string;
   compressDone = false;
 
   constructor(private backendService: BackendService) { }
@@ -29,13 +30,14 @@ export class UploadPageComponent implements OnInit {
     const el = event.srcElement as HTMLInputElement;
     if (el.files && el.files[0]) {
       const fileReader = new FileReader();
+      self.originalFileName = el.files[0].name;
       fileReader.addEventListener('load', function(loadedEvent: any) {
         self.uploadedFileBase64URI = loadedEvent.target.result;
         // Upload via backend
         self.backendService.uploadImage(self.uploadedFileBase64URI, 'PNG')
         .subscribe(uploadResponse => {
           console.log(uploadResponse.fileName);
-          self.compressedFilePath = uploadResponse.fileName;
+          self.temporaryFileName = uploadResponse.fileName;
           self.runCompressCommand();
         });
       });
@@ -44,12 +46,15 @@ export class UploadPageComponent implements OnInit {
   }
 
   getDownloadUrl() {
-    return this.backendService.getDownloadUrl(this.compressedFilePath);
+    return this.backendService.getDownloadUrl(this.temporaryFileName, this.originalFileName);
   }
 
   runCompressCommand() {
     const self = this;
-    self.backendService.runCompressPngCommand(self.compressedFilePath)
+    self.backendService.runCompressCommand(<KartoffelstampfCompressInstruction>{
+      compressType: KartoffelstampfCompressInstruction.COMPRESS_TYPE_LOSSLESS,
+      temporaryFileName: this.temporaryFileName,
+    })
     .pipe(
       finalize(() => {
         console.log('compress-done!');

src/styles.css

@@ -1,2 +1,5 @@
 /* You can add global styles to this file, and also import other style files */
 
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}