From dbd37197363c519eff6fe1ad500741454855e7ae Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Wed, 27 Dec 2023 22:26:51 +0800
Subject: [PATCH] :art: https://github.com/siyuan-note/siyuan/issues/9992

---
 app/src/assets/scss/business/_export.scss | 19 +++++++---
 app/src/protyle/export/util.ts            | 42 ++++++++++-------------
 2 files changed, 34 insertions(+), 27 deletions(-)

diff --git a/app/src/assets/scss/business/_export.scss b/app/src/assets/scss/business/_export.scss
index c8e54e245..bc7f23f28 100644
--- a/app/src/assets/scss/business/_export.scss
+++ b/app/src/assets/scss/business/_export.scss
@@ -1,5 +1,16 @@
-.export-img.protyle-wysiwyg [data-node-id].li[fold="1"] > .protyle-action:after {
-  background-color: transparent;
-  border: 1px solid var(--b3-list-hover);
-  box-sizing: border-box;
+.export-img {
+  position: relative;
+  border: 1px solid var(--b3-border-color);
+  border-radius: var(--b3-border-radius-b);
+
+  .protyle-wysiwyg {
+    position: relative;
+    z-index: 1;
+
+    [data-node-id].li[fold="1"] > .protyle-action:after {
+      background-color: transparent;
+      border: 1px solid var(--b3-list-hover);
+      box-sizing: border-box;
+    }
+  }
 }
diff --git a/app/src/protyle/export/util.ts b/app/src/protyle/export/util.ts
index 9f8e20bd9..38c4addb5 100644
--- a/app/src/protyle/export/util.ts
+++ b/app/src/protyle/export/util.ts
@@ -30,10 +30,10 @@ export const exportImage = (id: string) => {
     const exportDialog = new Dialog({
         title: window.siyuan.languages.exportAsImage,
         content: `<div class="b3-dialog__content" style="${isMobile() ? "padding:8px;" : ""};background-color: var(--b3-theme-background)">
-    <div style="${isMobile() ? "padding: 16px;margin: 8px 0" : "padding: 48px;margin: 8px 0"};border: 1px solid var(--b3-border-color);border-radius: var(--b3-border-radius-b);" 
-class="export-img protyle-wysiwyg${window.siyuan.config.editor.displayBookmarkIcon ? " protyle-wysiwyg--attr" : ""}" 
-id="preview"></div>
-    <div class="export-img__watermark"></div>
+    <div style="${isMobile() ? "padding: 16px;margin: 8px 0" : "padding: 48px;margin: 8px 0"};" class="export-img">
+        <div class="protyle-wysiwyg${window.siyuan.config.editor.displayBookmarkIcon ? " protyle-wysiwyg--attr" : ""}"></div>
+        <div class="export-img__watermark"></div>
+    </div>
 </div>
 <div class="b3-dialog__action">
     <label class="fn__flex">
@@ -41,8 +41,8 @@ id="preview"></div>
         <span class="fn__space"></span>
         <input id="keepFold" class="b3-switch fn__flex-center" type="checkbox" ${window.siyuan.storage[Constants.LOCAL_EXPORTIMG].keepFold ? "checked" : ""}>
     </label>
-    <label class="fn__flex">
-        ${window.siyuan.languages.exportPDF9}
+    <label class="fn__flex" style="margin-left: 24px">
+        ${window.siyuan.languages.export9}
         <span class="fn__space"></span>
         <input id="watermark" class="b3-switch fn__flex-center" type="checkbox" ${window.siyuan.storage[Constants.LOCAL_EXPORTIMG].watermark ? "checked" : ""}>
     </label>
@@ -64,7 +64,7 @@ id="preview"></div>
         setStorageVal(Constants.LOCAL_EXPORTIMG, window.siyuan.storage[Constants.LOCAL_EXPORTIMG]);
         setTimeout(() => {
             addScript("/stage/protyle/js/html2canvas.min.js?v=1.4.1", "protyleHtml2canvas").then(() => {
-                window.html2canvas(previewElement.parentElement, {useCORS: true}).then((canvas) => {
+                window.html2canvas(exportDialog.element.querySelector(".b3-dialog__content"), {useCORS: true}).then((canvas) => {
                     canvas.toBlob((blob: Blob) => {
                         const formData = new FormData();
                         formData.append("file", blob, btnsElement[1].getAttribute("data-title"));
@@ -79,7 +79,7 @@ id="preview"></div>
             });
         }, Constants.TIMEOUT_LOAD);
     });
-    const previewElement = exportDialog.element.querySelector("#preview") as HTMLElement;
+    const previewElement = exportDialog.element.querySelector(".protyle-wysiwyg") as HTMLElement;
     const foldElement = (exportDialog.element.querySelector("#keepFold") as HTMLInputElement);
     foldElement.addEventListener("change", () => {
         btnsElement[0].setAttribute("disabled", "disabled");
@@ -106,24 +106,20 @@ id="preview"></div>
     const updateWatermark = () => {
         const watermarkPreviewElement = exportDialog.element.querySelector(".export-img__watermark") as HTMLElement;
         if (watermarkElement.checked) {
-            window.siyuan.config.export.imageWatermarkDesc = "vvvvv";
             if (window.siyuan.config.export.imageWatermarkDesc) {
                 watermarkPreviewElement.setAttribute("style", window.siyuan.config.export.imageWatermarkDesc)
             } else if (window.siyuan.config.export.imageWatermarkStr) {
-                const fontSize = 120;
-                const fontWeight = "normal";
-                const canvas = document.createElement("canvas");
-                canvas.width = window.siyuan.config.export.imageWatermarkDesc.length * fontSize;
-                canvas.height = 140;
-                const context = canvas.getContext("2d");
-                context.fillStyle = 'transparent';
-                context.fillRect(0, 0, canvas.width, canvas.height);
-                context.fillStyle = "#66CCFF";
-                context.font = fontWeight + " " + fontSize + "px sans-serif";
-                context.textAlign = "left";
-                context.textBaseline = "top";
-                context.fillText(window.siyuan.config.export.imageWatermarkDesc, 0, 0);
-                watermarkPreviewElement.setAttribute("style", `background-image: url(${canvas.toDataURL("image/png")});background-repeat: repeat;`)
+                addScript("/stage/protyle/js/html2canvas.min.js?v=1.4.1", "protyleHtml2canvas").then(() => {
+                    const width = Math.max(exportDialog.element.querySelector('.export-img').clientWidth / 3, 150);
+                    watermarkPreviewElement.setAttribute("style", `width: ${width}px;height: ${width}px;display: flex;justify-content: center;align-items: center;color: var(--b3-border-color);font-size: 12px;`)
+                    watermarkPreviewElement.innerHTML = `<div style="transform: rotate(-45deg)">${window.siyuan.config.export.imageWatermarkStr}</div>`;
+                    window.html2canvas(watermarkPreviewElement, {
+                        useCORS: true
+                    }).then((canvas) => {
+                        watermarkPreviewElement.innerHTML = "";
+                        watermarkPreviewElement.setAttribute("style", `background-image: url(${canvas.toDataURL("image/png")});background-repeat: repeat;position: absolute;top: 0;left: 0;width: 100%;height: 100%;border-radius: var(--b3-border-radius-b);`)
+                    });
+                });
             }
         } else {
             watermarkPreviewElement.removeAttribute("style");