Skip to content

Use html-to-image to replace html2canvs #14161

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
TCOTC opened this issue Feb 20, 2025 · 13 comments
Closed

Use html-to-image to replace html2canvs #14161

TCOTC opened this issue Feb 20, 2025 · 13 comments
Assignees
@Vanessa219
Labels
Enhancement
Milestone
3.1.25

Comments

@TCOTC
Copy link
Contributor

TCOTC commented Feb 20, 2025 •
edited by 88250
Loading

使用 html-to-image 替换 html2canvs

01

公式中括号、自动编号：

https://ld246.com/article/1740039365723

02

导出的图片没有显示图标：

Image

Image
Vanessa219 added a commit that referenced this issue Mar 7, 2025
@Vanessa219
🎨 #14161
c017aa0
@Vanessa219 Vanessa219 changed the title 导出图片样式问题 使用 html-to-image 替换 html2canvs Mar 7, 2025
@Vanessa219 Vanessa219 added this to the 3.1.25 milestone Mar 7, 2025
Vanessa219 added a commit that referenced this issue Mar 7, 2025
@Vanessa219
🎨 #14161
09e52d3
This was referenced Mar 7, 2025
Closed
Closed
@TCOTC
Copy link
Contributor Author

TCOTC commented Mar 7, 2025 •
edited
Loading

试了一下导出 排版元素 文档，默认主题无法导出：

Image

Savor 主题会破坏界面：

Image

简单的文档能导出，但会有滚动条：

video.webm

Vanessa219 added a commit that referenced this issue Mar 7, 2025
@Vanessa219
🎨 #14161
3356f5b
@88250 88250 changed the title 使用 html-to-image 替换 html2canvs Use html-to-image to replace html2canvs Mar 7, 2025
@TCOTC
Copy link
Contributor Author

TCOTC commented Mar 8, 2025

  1. 有滚动条

  2. 嵌入块的角标不显示

    Image

@Vanessa219
Copy link
Member

滚动条和排版元素文档的问题在 Mac 和 Windows 下无法重现。
嵌入块角标需要 @88250 修复一下

88250 added a commit that referenced this issue Mar 10, 2025
@88250
🎨 Improve embed block exporting #14161 (comment)
f81cf5f
@88250
Copy link
Member

88250 commented Mar 10, 2025

已经提交

Vanessa219 added a commit that referenced this issue Mar 10, 2025
@Vanessa219
🎨 #14161

Unverified

This user has not yet uploaded their public signing key.
GPG key ID: 136F30F901A2231D
Learn about vigilant mode
a4df630
@TCOTC
Copy link
Contributor Author

TCOTC commented Mar 16, 2025 •
edited
Loading

@Vanessa219 我试了一下用 overflow: hidden; 可以去掉滚动条（需要在点击 确定 之后导出图片的过程中再给元素添加overflow: hidden;）：

.b3-dialog--open[data-key="dialog-exportimage"] .b3-dialog__content {
    overflow: hidden;
}

排版元素文档在我这里已经能导出了

@TCOTC TCOTC mentioned this issue Mar 16, 2025
Closed
@Vanessa219
Copy link
Member

看一下其他用户有没有，有的话再合并进来。

@TCOTC
Copy link
Contributor Author

TCOTC commented Mar 18, 2025

@Vanessa219

Image

@Vanessa219
Copy link
Member

hidden好像不行，导出时无法滚动查看了。

@TCOTC
Copy link
Contributor Author

TCOTC commented Mar 18, 2025 •
edited
Loading

在点击 确定 之后导出图片的过程中再给元素添加 overflow: hidden;

导出过程中本来就不允许滚动

@TCOTC
Copy link
Contributor Author

TCOTC commented Mar 18, 2025

那个 CSS 只是示意

TCOTC added a commit to TCOTC/Whisper that referenced this issue Mar 18, 2025
@TCOTC
refactor(style): 注释掉不再需要的样式
03adad0 
v3.1.25 更换了图片导出库 siyuan-note/siyuan#14161 ，不再拆分行级元素 siyuan-note/siyuan#13856 ，所以注释掉这些样式
@Vanessa219
Copy link
Member

我这里不确定要怎么改，因为无法重现。

@TCOTC
Copy link
Contributor Author

TCOTC commented Mar 18, 2025

导出图片的时候会去掉 .b3-dialog__container 的 style.height ，就在这个时候给 .b3-dialog__content 添加 style.overflow = "hidden"

Vanessa219 added a commit that referenced this issue Mar 19, 2025
@Vanessa219
🎨 #14161

Unverified

This user has not yet uploaded their public signing key.
GPG key ID: 136F30F901A2231D
Learn about vigilant mode
e7747b7
@Vanessa219
Copy link
Member

好的，还麻烦再看一看。

TCOTC added a commit to TCOTC/Whisper that referenced this issue Apr 9, 2025
@TCOTC
refactor(preview): 移除导出图片时不必要的样式
ddbfe6e 
v3.1.25 更换了图片导出库 siyuan-note/siyuan#14161 ，不再拆分行级元素 siyuan-note/siyuan#13856 ，所以移除这些样式
@TCOTC TCOTC mentioned this issue May 5, 2025
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@Vanessa219 Vanessa219

Labels
Enhancement
Projects
None yet
Milestone
3.1.25
Development

No branches or pull requests
3 participants
@88250 @Vanessa219 @TCOTC