update

simple-demo/js/util.js

@@ -350,3 +350,35 @@ const copyUtil = {
         }
     }
 }
+
+/**
+ * base64图片转为webp格式
+ * @param base64Image
+ * @returns {Promise<string|*>}
+ */
+async function convertToWebPAsync(base64Image) {
+    // 检查图像格式是否为WebP
+    if (base64Image.startsWith('data:image/webp')) {
+        // 如果是WebP格式，直接返回原始的base64字符串
+        return base64Image;
+    } else {
+        // 将图像转换为WebP格式
+        const image = new Image();
+        image.src = base64Image;
+
+        await new Promise((resolve, reject) => {
+            image.onload = resolve;
+            image.onerror = reject;
+        });
+
+        const canvas = document.createElement('canvas');
+        canvas.width = image.width;
+        canvas.height = image.height;
+
+        const ctx = canvas.getContext('2d');
+        ctx.drawImage(image, 0, 0);
+
+        const webpData = canvas.toDataURL('image/webp');
+        return webpData;
+    }
+}

simple-demo/send_memos.html

@@ -42,34 +42,62 @@
         }
     });
 
+    async function convertToWebPAsync(base64Image) {
+        // 检查图像格式是否为WebP
+        if (base64Image.startsWith('data:image/webp')) {
+            // 如果是WebP格式，直接返回原始的base64字符串
+            return base64Image;
+        } else {
+            // 将图像转换为WebP格式
+            const image = new Image();
+            image.src = base64Image;
+
+            await new Promise((resolve, reject) => {
+                image.onload = resolve;
+                image.onerror = reject;
+            });
+
+            const canvas = document.createElement('canvas');
+            canvas.width = image.width;
+            canvas.height = image.height;
+
+            const ctx = canvas.getContext('2d');
+            ctx.drawImage(image, 0, 0);
+
+            const webpData = canvas.toDataURL('image/webp');
+            return webpData;
+        }
+    }
+
     /**
      * 获取 markdown 格式的内容
      * @param delta
      * @returns {string}
      */
-    function deltaToMarkdown(delta) {
+    async function deltaToMarkdown(delta) {
         let markdown = '';
-        delta.forEach(function (op) {
+        for (const op of delta['ops']) {
             if (op.insert) {
                 if (typeof op.insert === 'string') {
                     markdown += op.insert;
-                } else if (typeof op.insert === 'object' && op.insert.image) {
-                    markdown += '![' + op.insert.alt + '](' + op.insert.image + ')';
+                } else if (op.insert.image) {
+                    // 如果是图片,转换为webp
+                    const webpBase64 = await convertToWebPAsync(op.insert.image);
+                    markdown += `![${op.insert.alt}](${webpBase64})`;
                 }
             }
-        });
+        }
         return markdown;
     }
 
     // 获取编辑器内容
-    function getContent() {
-        const content = quill.root.innerHTML;
-        console.log(content);
-    }
-
+    // function getContent() {
+    //     const content = quill.root.innerHTML;
+    //     console.log(content);
+    // }
     // 发送数据
-    function sendData() {
-        const content = deltaToMarkdown(quill.getContents());
+    async function sendData() {
+        const content = await deltaToMarkdown(quill.getContents());
         const categories = getSelectedCategories();
 
         // 添加多选按钮选择的分类到内容前面