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

🎨 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

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

@ -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");