feat: support image resizing before uploading.

Creling · Aug 4, 2021 · c374420 · c374420
1 parent bb7d9ff
commit c374420
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 7 deletions.
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
   },
   "dependencies": {
     "axios": "^0.21.1",
+    "compressorjs": "^1.0.7",
     "object-path": "^0.11.5"
   }
 }
diff --git a/src/main.ts b/src/main.ts
@@ -8,19 +8,23 @@ import {
 import axios from "axios"
 import objectPath from 'object-path'
 import ImageUploaderSettingTab from './settings-tab'
-
+import Compressor from 'compressorjs'
 interface ImageUploaderSettings {
   apiEndpoint: string;
   uploadHeader: string;
   uploadBody: string;
   imageUrlPath: string;
+  maxWidth: number;
+  enableResize: boolean;
 }
 
 const DEFAULT_SETTINGS: ImageUploaderSettings = {
   apiEndpoint: null,
   uploadHeader: null,
   uploadBody: "{\"image\": \"$FILE\"}",
-  imageUrlPath: null
+  imageUrlPath: null,
+  maxWidth: 4096,
+  enableResize: false,
 };
 
 type Handlers = {
@@ -55,23 +59,36 @@ export default class ImageUploader extends Plugin {
   setupPasteHandler(): void {
     this.registerCodeMirror((cm: any) => {
       const originalPasterHandler = this.backupOriginalHandlers(cm);
-      cm._handlers.paste[0] = (_: any, e: ClipboardEvent) => {
+      cm._handlers.paste[0] = async (_: any, e: ClipboardEvent) => {
         const { files } = e.clipboardData;
         if (files.length == 0 || !files[0].type.startsWith("image")) {
           originalPasterHandler.paste(_, e)
         }
         else if (this.settings.apiEndpoint && this.settings.uploadHeader && this.settings.imageUrlPath) {
-          for (const file of files) {
+          for (let file of files) {
 
             const randomString = (Math.random() * 10086).toString(36).substr(0, 8)
             const pastePlaceText = `![uploading...](${randomString})\n`
             this.getEditor().replaceSelection(pastePlaceText)
 
+            const maxWidth = this.settings.maxWidth
+            if (this.settings.enableResize) {
+              const compressedFile = await new Promise((resolve, reject) => {
+                new Compressor(file, {
+                  maxWidth: maxWidth,
+                  success: resolve,
+                  error: reject,
+                })
+              })
+
+              file = compressedFile as File
+            }
             const formData = new FormData()
             const uploadBody = JSON.parse(this.settings.uploadBody)
+
             for (const key in uploadBody) {
               if (uploadBody[key] == "$FILE") {
-                formData.append(key, file)
+                formData.append(key, file, file.name)
               }
               else {
                 formData.append(key, uploadBody[key])

diff --git a/src/settings-tab.ts b/src/settings-tab.ts
@@ -2,7 +2,7 @@
  * @Author: Creling
  * @Date: 2021-07-15 23:54:03
  * @LastEditors: Creling
- * @LastEditTime: 2021-07-16 09:41:25
+ * @LastEditTime: 2021-08-04 22:52:34
  * @Description: file content
  */
 import {
@@ -79,7 +79,6 @@ export default class ImageUploaderSettingTab extends PluginSettingTab {
                 text.inputEl.cols = 40
             });
 
-
         new Setting(containerEl)
             .setName("Image Url Path")
             .setDesc("The path to the image url in http response.")
@@ -92,5 +91,31 @@ export default class ImageUploaderSettingTab extends PluginSettingTab {
                         await this.plugin.saveSettings();
                     })
             });
+        new Setting(containerEl)
+            .setName("Enable Resize")
+            .setDesc("Resize the image before uploading")
+            .addToggle((toggle) => {
+                toggle
+                    .setValue(this.plugin.settings.enableResize)
+                    .onChange(async (value) => {
+                        this.plugin.settings.enableResize = value;
+                        this.display();
+                    })
+            })
+
+        if (this.plugin.settings.enableResize) {
+            new Setting(containerEl)
+                .setName("Max Width")
+                .setDesc("The image wider than this will be resized by the natural aspect ratio")
+                .addText((text) => {
+                    text
+                        .setPlaceholder("")
+                        .setValue(this.plugin.settings.maxWidth.toString())
+                        .onChange(async (value) => {
+                            this.plugin.settings.maxWidth = parseInt(value);
+                            await this.plugin.saveSettings();
+                        })
+                });
+        }
     }
 }