✨ fix https://github.com/siyuan-note/siyuan/issues/2919

app/src/menus/commonMenuItem.ts

@@ -23,6 +23,7 @@ import {rename} from "../editor/rename";
 import {matchHotKey} from "../protyle/util/hotKey";
 import * as dayjs from "dayjs";
 import {Constants} from "../constants";
+import {exportImage} from "../protyle/export/util";
 
 const bindAttrInput = (inputElement: HTMLInputElement, confirmElement: Element) => {
     inputElement.addEventListener("keydown", (event) => {
@@ -669,6 +670,12 @@ export const exportMd = (id: string) => {
                     openByMobile(response.data.zip);
                 });
             }
+        }, {
+            label: window.siyuan.languages.image,
+            icon: "iconImage",
+            click: () => {
+                exportImage(id);
+            }
         },
             /// #if !BROWSER
             {

app/src/protyle/export/util.ts

@@ -1,4 +1,18 @@
 import {hideMessage, showMessage} from "../../dialog/message";
+import {fetchPost} from "../../util/fetch";
+import {Dialog} from "../../dialog";
+import {addScript} from "../util/addScript";
+import {isMobile} from "../../util/functions";
+import {Constants} from "../../constants";
+import {highlightRender} from "../markdown/highlightRender";
+import {mathRender} from "../markdown/mathRender";
+import {mermaidRender} from "../markdown/mermaidRender";
+import {flowchartRender} from "../markdown/flowchartRender";
+import {graphvizRender} from "../markdown/graphvizRender";
+import {chartRender} from "../markdown/chartRender";
+import {mindmapRender} from "../markdown/mindmapRender";
+import {abcRender} from "../markdown/abcRender";
+import {plantumlRender} from "../markdown/plantumlRender";
 /// #if !BROWSER
 import {escapeHtml} from "../../util/escape";
 import {shell} from "electron";
@@ -14,3 +28,71 @@ export const afterExport = (exportPath: string, msgId: string) => {
     });
 };
 /// #endif
+
+declare const html2canvas: (element: Element) => Promise<any>;
+
+export const exportImage = (id: string) => {
+    const exportDialog = new Dialog({
+        title: window.siyuan.languages.export,
+        content: `<div class="b3-dialog__content" style="max-height: 70vh;overflow: auto">
+    <div style="padding: 48px;
+    border: 1px solid var(--b3-border-color);
+    border-radius: 10px;
+    margin: 8px 0 24px;" class="protyle-wysiwyg${window.siyuan.config.editor.displayBookmarkIcon ? " protyle-wysiwyg--attr" : ""}" id="preview">
+        <div class="fn__loading" style="left:0"><img height="48px" width="48px" src="stage/loading-pure.svg"></div>
+    </div>
+    <div class="ft__smaller ft__on-surface fn__flex"><img style="height: 18px;margin: 0 8px" src="stage/icon.png">由思源笔记导出</div>
+    <div class="fn__hr--b"></div>
+    <div class="fn__hr--b"></div>
+</div>
+<div class="b3-dialog__action">
+    <button class="b3-button b3-button--cancel">${window.siyuan.languages.cancel}</button><div class="fn__space"></div>
+    <button class="b3-button b3-button--text">${window.siyuan.languages.confirm}</button>
+</div>`,
+        width: isMobile() ? "90vw" : "990px",
+    });
+    fetchPost("/api/export/exportPreviewHTML", {
+        id,
+        keepFold: false,
+    }, (response) => {
+        const previewElement = exportDialog.element.querySelector("#preview")
+        previewElement.innerHTML = response.data.content;
+
+        highlightRender(previewElement);
+        mathRender(previewElement);
+        mermaidRender(previewElement);
+        flowchartRender(previewElement);
+        graphvizRender(previewElement);
+        chartRender(previewElement);
+        mindmapRender(previewElement);
+        abcRender(previewElement);
+        plantumlRender(previewElement);
+        previewElement.querySelectorAll("table").forEach((item: HTMLElement) => {
+            if (item.clientWidth > item.parentElement.clientWidth) {
+                // @ts-ignore
+                item.style.zoom = item.parentElement.clientWidth / item.clientWidth;
+            }
+        });
+        const btnsElement = exportDialog.element.querySelectorAll(".b3-button");
+        btnsElement[0].addEventListener("click", () => {
+            exportDialog.destroy();
+        });
+        btnsElement[1].addEventListener("click", () => {
+            const msgId = showMessage(window.siyuan.languages.exporting, 0);
+            previewElement.parentElement.style.maxHeight = "none";
+            setTimeout(() => {
+                addScript("stage/protyle/js/html2canvas.min.js?v=1.4.1", "protyleHtml2canvas").then(() => {
+                    html2canvas(previewElement.parentElement).then((canvas) => {
+                        const link = document.createElement("a");
+                        link.download = response.data.name + ".png";
+                        link.href = "data:" + canvas.toDataURL("image/png");
+                        link.click();
+                        link.remove();
+                        hideMessage(msgId);
+                        exportDialog.destroy();
+                    });
+                });
+            }, Constants.TIMEOUT_TRANSITION)
+        });
+    });
+}