Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-12-22 09:30:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

🎨 https://github.com/siyuan-note/siyuan/issues/9992

Browse source
This commit is contained in:
Vanessa 2023-12-27 22:26:51 +08:00
parent c10f04f74f
commit dbd3719736
2 changed files with 34 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

19
app/src/assets/scss/business/_export.scss
View file

@ -1,5 +1,16 @@
.export-img.protyle-wysiwyg [data-node-id].li[fold="1"] > .protyle-action:after { .export-img {
background-color: transparent; position: relative;
border: 1px solid var(--b3-list-hover); border: 1px solid var(--b3-border-color);
box-sizing: border-box; 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;
}
}
} }

42
app/src/protyle/export/util.ts
View file

@ -30,10 +30,10 @@ export const exportImage = (id: string) => {
const exportDialog = new Dialog({ const exportDialog = new Dialog({
title: window.siyuan.languages.exportAsImage, title: window.siyuan.languages.exportAsImage,
content: `<div class="b3-dialog__content" style="${isMobile() ? "padding:8px;" : ""};background-color: var(--b3-theme-background)"> 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);" <div style="${isMobile() ? "padding: 16px;margin: 8px 0" : "padding: 48px;margin: 8px 0"};" class="export-img">
class="export-img protyle-wysiwyg${window.siyuan.config.editor.displayBookmarkIcon ? " protyle-wysiwyg--attr" : ""}" <div class="protyle-wysiwyg${window.siyuan.config.editor.displayBookmarkIcon ? " protyle-wysiwyg--attr" : ""}"></div>
id="preview"></div> <div class="export-img__watermark"></div>
<div class="export-img__watermark"></div> </div>
</div> </div>
<div class="b3-dialog__action"> <div class="b3-dialog__action">
<label class="fn__flex"> <label class="fn__flex">
@ -41,8 +41,8 @@ id="preview"></div>
<span class="fn__space"></span> <span class="fn__space"></span>
<input id="keepFold" class="b3-switch fn__flex-center" type="checkbox" ${window.siyuan.storage[Constants.LOCAL_EXPORTIMG].keepFold ? "checked" : ""}> <input id="keepFold" class="b3-switch fn__flex-center" type="checkbox" ${window.siyuan.storage[Constants.LOCAL_EXPORTIMG].keepFold ? "checked" : ""}>
</label> </label>
<label class="fn__flex"> <label class="fn__flex" style="margin-left: 24px">
${window.siyuan.languages.exportPDF9} ${window.siyuan.languages.export9}
<span class="fn__space"></span> <span class="fn__space"></span>
<input id="watermark" class="b3-switch fn__flex-center" type="checkbox" ${window.siyuan.storage[Constants.LOCAL_EXPORTIMG].watermark ? "checked" : ""}> <input id="watermark" class="b3-switch fn__flex-center" type="checkbox" ${window.siyuan.storage[Constants.LOCAL_EXPORTIMG].watermark ? "checked" : ""}>
</label> </label>
@ -64,7 +64,7 @@ id="preview"></div>
setStorageVal(Constants.LOCAL_EXPORTIMG, window.siyuan.storage[Constants.LOCAL_EXPORTIMG]); setStorageVal(Constants.LOCAL_EXPORTIMG, window.siyuan.storage[Constants.LOCAL_EXPORTIMG]);
setTimeout(() => { setTimeout(() => {
addScript("/stage/protyle/js/html2canvas.min.js?v=1.4.1", "protyleHtml2canvas").then(() => { 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) => { canvas.toBlob((blob: Blob) => {
const formData = new FormData(); const formData = new FormData();
formData.append("file", blob, btnsElement[1].getAttribute("data-title")); formData.append("file", blob, btnsElement[1].getAttribute("data-title"));
@ -79,7 +79,7 @@ id="preview"></div>
}); });
}, Constants.TIMEOUT_LOAD); }, 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); const foldElement = (exportDialog.element.querySelector("#keepFold") as HTMLInputElement);
foldElement.addEventListener("change", () => { foldElement.addEventListener("change", () => {
btnsElement[0].setAttribute("disabled", "disabled"); btnsElement[0].setAttribute("disabled", "disabled");
@ -106,24 +106,20 @@ id="preview"></div>
const updateWatermark = () => { const updateWatermark = () => {
const watermarkPreviewElement = exportDialog.element.querySelector(".export-img__watermark") as HTMLElement; const watermarkPreviewElement = exportDialog.element.querySelector(".export-img__watermark") as HTMLElement;
if (watermarkElement.checked) { if (watermarkElement.checked) {
window.siyuan.config.export.imageWatermarkDesc = "vvvvv";
if (window.siyuan.config.export.imageWatermarkDesc) { if (window.siyuan.config.export.imageWatermarkDesc) {
watermarkPreviewElement.setAttribute("style", window.siyuan.config.export.imageWatermarkDesc) watermarkPreviewElement.setAttribute("style", window.siyuan.config.export.imageWatermarkDesc)
} else if (window.siyuan.config.export.imageWatermarkStr) { } else if (window.siyuan.config.export.imageWatermarkStr) {
const fontSize = 120; addScript("/stage/protyle/js/html2canvas.min.js?v=1.4.1", "protyleHtml2canvas").then(() => {
const fontWeight = "normal"; const width = Math.max(exportDialog.element.querySelector('.export-img').clientWidth / 3, 150);
const canvas = document.createElement("canvas"); 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;`)
canvas.width = window.siyuan.config.export.imageWatermarkDesc.length * fontSize; watermarkPreviewElement.innerHTML = `<div style="transform: rotate(-45deg)">${window.siyuan.config.export.imageWatermarkStr}</div>`;
canvas.height = 140; window.html2canvas(watermarkPreviewElement, {
const context = canvas.getContext("2d"); useCORS: true
context.fillStyle = 'transparent'; }).then((canvas) => {
context.fillRect(0, 0, canvas.width, canvas.height); watermarkPreviewElement.innerHTML = "";
context.fillStyle = "#66CCFF"; 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);`)
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;`)
} }
} else { } else {
watermarkPreviewElement.removeAttribute("style"); watermarkPreviewElement.removeAttribute("style");