From 886fdf7cd626e0e94f338780fe2bb9b1b5e0136b Mon Sep 17 00:00:00 2001
From: Myzel394 <50424412+Myzel394@users.noreply.github.com>
Date: Sun, 21 Nov 2021 15:27:13 +0000
Subject: [PATCH] Improve image compression (#2369)

* added options

* added checkbox handling to import into note

* added image compression option respecting
---
 src/public/app/dialogs/import.js        |  4 +-
 src/public/app/dialogs/options/other.js | 50 ++++++++++++++++++++++---
 src/routes/api/options.js               |  3 +-
 src/services/image.js                   |  3 +-
 src/services/options_init.js            |  3 +-
 src/views/dialogs/import.ejs            |  2 +-
 6 files changed, 54 insertions(+), 11 deletions(-)

diff --git a/src/public/app/dialogs/import.js b/src/public/app/dialogs/import.js
index 30fb87305..b37ca63c0 100644
--- a/src/public/app/dialogs/import.js
+++ b/src/public/app/dialogs/import.js
@@ -1,6 +1,7 @@
 import utils from '../services/utils.js';
 import treeService from "../services/tree.js";
 import importService from "../services/import.js";
+import options from "../services/options.js";
 
 const $dialog = $("#import-dialog");
 const $form = $("#import-form");
@@ -8,6 +9,7 @@ const $noteTitle = $dialog.find(".import-note-title");
 const $fileUploadInput = $("#import-file-upload-input");
 const $importButton = $("#import-button");
 const $safeImportCheckbox = $("#safe-import-checkbox");
+const $shrinkImagesWrapper = $("shrink-images-wrapper");
 const $shrinkImagesCheckbox = $("#shrink-images-checkbox");
 const $textImportedAsTextCheckbox = $("#text-imported-as-text-checkbox");
 const $codeImportedAsCodeCheckbox = $("#code-imported-as-code-checkbox");
@@ -21,7 +23,7 @@ export async function showDialog(noteId) {
     $fileUploadInput.val('').trigger('change'); // to trigger Import button disabling listener below
 
     $safeImportCheckbox.prop("checked", true);
-    $shrinkImagesCheckbox.prop("checked", true);
+    $shrinkImagesCheckbox.prop("checked", options.is('compressImages'));
     $textImportedAsTextCheckbox.prop("checked", true);
     $codeImportedAsCodeCheckbox.prop("checked", true);
     $explodeArchivesCheckbox.prop("checked", true);
diff --git a/src/public/app/dialogs/options/other.js b/src/public/app/dialogs/options/other.js
index c3a60c301..b8c7b7738 100644
--- a/src/public/app/dialogs/options/other.js
+++ b/src/public/app/dialogs/options/other.js
@@ -3,6 +3,13 @@ import server from "../../services/server.js";
 import toastService from "../../services/toast.js";
 
 const TPL = `
+<style>
+.disabled-field {
+    opacity: 0.5;
+    pointer-events: none;
+}
+</style>
+
 <div>
     <h4>Spell check</h4>
 
@@ -27,15 +34,22 @@ const TPL = `
 
 <div>
     <h4>Image compression</h4>
-
+    
     <div class="form-group">
-        <label for="image-max-width-height">Max width / height of an image in pixels (image will be resized if it exceeds this setting).</label>
-        <input class="form-control" id="image-max-width-height" type="number">
+        <input id="image-compresion-enabled" type="checkbox" name="image-compression-enabled">
+        <label for="image-compresion-enabled">Enable image compression</label>
     </div>
 
-    <div class="form-group">
-        <label for="image-jpeg-quality">JPEG quality (0 - worst quality, 100 best quality, 50 - 85 is recommended)</label>
-        <input class="form-control" id="image-jpeg-quality" min="0" max="100" type="number">
+    <div id="image-compression-enabled-wraper">
+        <div class="form-group">
+            <label for="image-max-width-height">Max width / height of an image in pixels (image will be resized if it exceeds this setting).</label>
+            <input class="form-control" id="image-max-width-height" type="number">
+        </div>
+    
+        <div class="form-group">
+            <label for="image-jpeg-quality">JPEG quality (0 - worst quality, 100 best quality, 50 - 85 is recommended)</label>
+            <input class="form-control" id="image-jpeg-quality" min="0" max="100" type="number">
+        </div>
     </div>
 </div>
 
@@ -201,6 +215,26 @@ export default class ProtectedSessionOptions {
 
             return false;
         });
+
+        this.$enableImageCompression = $("#image-compresion-enabled");
+        this.$imageCompressionWrapper = $("#image-compression-enabled-wraper");
+
+        this.setImageCompression = (isChecked) => {
+            if (isChecked) {
+                this.$imageCompressionWrapper.removeClass("disabled-field");
+            } else {
+                this.$imageCompressionWrapper.addClass("disabled-field");
+            }
+        }
+
+        this.$enableImageCompression.on("change", () => {
+            const isChecked = this.$enableImageCompression.prop("checked");
+            const opts = { 'compressImages': isChecked ? 'true' : 'false' };
+
+            server.put('options', opts).then(() => toastService.showMessage("Options change have been saved."));
+
+            this.setImageCompression(isChecked);
+        })
     }
 
     optionsLoaded(options) {
@@ -216,5 +250,9 @@ export default class ProtectedSessionOptions {
 
         this.$autoReadonlySizeText.val(options['autoReadonlySizeText']);
         this.$autoReadonlySizeCode.val(options['autoReadonlySizeCode']);
+
+        const compressImages = options['compressImages'] === 'true';
+        this.$enableImageCompression.prop('checked', compressImages);
+        this.setImageCompression(compressImages);
     }
 }
diff --git a/src/routes/api/options.js b/src/routes/api/options.js
index 8464c8604..6ad5c5f0b 100644
--- a/src/routes/api/options.js
+++ b/src/routes/api/options.js
@@ -54,7 +54,8 @@ const ALLOWED_OPTIONS = new Set([
     'dailyBackupEnabled',
     'weeklyBackupEnabled',
     'monthlyBackupEnabled',
-    'maxContentWidth'
+    'maxContentWidth',
+    'compressImages'
 ]);
 
 function getOptions() {
diff --git a/src/services/image.js b/src/services/image.js
index c6551f1e7..74e74224c 100644
--- a/src/services/image.js
+++ b/src/services/image.js
@@ -14,6 +14,7 @@ const isSvg = require('is-svg');
 const isAnimated = require('is-animated');
 
 async function processImage(uploadBuffer, originalName, shrinkImageSwitch) {
+    const compressImages = optionService.getOptionBool("compressImages");
     const origImageFormat = getImageType(uploadBuffer);
 
     if (origImageFormat && ["webp", "svg", "gif"].includes(origImageFormat.ext)) {
@@ -25,7 +26,7 @@ async function processImage(uploadBuffer, originalName, shrinkImageSwitch) {
         shrinkImageSwitch = false;
     }
 
-    const finalImageBuffer = shrinkImageSwitch ? await shrinkImage(uploadBuffer, originalName) : uploadBuffer;
+    const finalImageBuffer = (compressImages && shrinkImageSwitch) ? await shrinkImage(uploadBuffer, originalName) : uploadBuffer;
 
     const imageFormat = getImageType(finalImageBuffer);
 
diff --git a/src/services/options_init.js b/src/services/options_init.js
index fcfcd28c3..d6034a97a 100644
--- a/src/services/options_init.js
+++ b/src/services/options_init.js
@@ -90,7 +90,8 @@ const defaultOptions = [
     { name: 'dailyBackupEnabled', value: 'true', isSynced: false },
     { name: 'weeklyBackupEnabled', value: 'true', isSynced: false },
     { name: 'monthlyBackupEnabled', value: 'true', isSynced: false },
-    { name: 'maxContentWidth', value: '1200', isSynced: false }
+    { name: 'maxContentWidth', value: '1200', isSynced: false },
+    { name: 'compressImages', value: 'true', isSynced: true }
 ];
 
 function initStartupOptions() {
diff --git a/src/views/dialogs/import.ejs b/src/views/dialogs/import.ejs
index 0466e5876..da2e29718 100644
--- a/src/views/dialogs/import.ejs
+++ b/src/views/dialogs/import.ejs
@@ -34,7 +34,7 @@
                             </label>
                         </div>
 
-                        <div class="checkbox">
+                        <div class="checkbox" id="shrink-images-wrapper">
                             <label data-toggle="tooltip" title="<p>If you check this option, Trilium will attempt to shrink the imported images by scaling and optimization which may affect the perceived image quality. If unchecked, images will be imported without changes.</p><p>This doesn't apply to <code>.zip</code> imports with metadata since it is assumed these files are already optimized.</p>">
                                 <input id="shrink-images-checkbox" value="1" type="checkbox" checked> <span>Shrink images</span>
                             </label>