Cannot export to jpg

[merlinuwe]

I see an error message, when I try to copy or save an image (standard jpg):

(png and pdf work.)

Windows 10 Obsidian 1.5.12 Export Image plugin 2.3.3

[zhouhua]

Last weekend, I accidentally discovered that in previous versions, the exported JPG images were actually in the wrong format—they were PNGs. So, I spent the weekend fixing this issue, attempting to export images in the true JPG format. From your error message, it appears to be a browser compatibility issue that doesn't allow JPG images to be written to the clipboard.

Is the save function working properly for JPG format?

Due to compatibility issues that make the copy to clipboard function unavailable, I might not be able to fix it temporarily. Perhaps the entire copy to clipboard feature could be removed?

[zhouhua]

Before copying, I added a check to test if the current file format is allowed to be copied.

[merlinuwe]

Yes, images can be saved in jpg format.

Currently with release 2.3.3, copying makes png instead of jpg if jpg is set as output.

Your solution is good for the moment. Suggestion: Is it easier for you to export to webp?

[merlinuwe]

(I just tried an update, but it failed on Windows 10 and Android; I'll try later again.)

[zhouhua]

Oh, sorry, the new version hasn't been released yet. I'll let you know once it's available.

[zhouhua]

@merlinuwe The new version has been released.

Due to the relatively poor compatibility of WebP, I've implemented some precautionary measures. If you can see the option to choose WebP format on the settings page, then you can normally export images in WebP format. If the device does not support it, then this option will not be available.

[merlinuwe]

First impressions:

Installing on Windows 10 and Android 11 is possible. Tested only with Windows 10, Android 11 does not work at the moment.

For a fracture of a second I see this:

I used the standard settings:

I tested with a complex note: Transclusions (embeddings) of an other notes, links (URI, email-links, links to notes), tables with inline dataview, google calendar plugin, dataview tables, tasks, ... together 21 sites.

Sometimes, the images are to short to show the complete content, because of limitations of the image format or the width used in the settings (640), I guess.

Saving is possible within the permited limits. It is possible to save as

• pdf
• webp
• png Standard
• png Bild mit transparentem Hintergrund
• jpg

It is possible to generate the image to the clipboard for

• png Standard
• png transparent

It is already translated into german. ;-)

There are some scrollbars, can you hide them?

Here you see the output of webp, which stops before the end of the note:

As you see, there are some problems with the theme (?), it shows frames in the color #d9d9d9 or #e5e7eb with transparent output used:

[zhouhua]

Could you share your theme configuration with me?

[zhouhua]

The two screenshots you sent are a bit hard for me to understand; they look somewhat cluttered. I'm having trouble distinguishing which parts are normal and which parts are problematic.

Perhaps you could take more complete screenshots. If the exported images don't meet your expectations, you could show me a comparison with the style of the note in reading mode.

[merlinuwe]

Could you share your theme configuration with me?

Sure. I use MagicUser, dark, MagicUser Moon. The styles are adapted in style settings plugin. Here is the complete folder with all the adjustments:

obsidian-style-settings.zip

[merlinuwe]

The two screenshots you sent are a bit hard for me to understand; they look somewhat cluttered. I'm having trouble distinguishing which parts are normal and which parts are problematic.

Perhaps you could take more complete screenshots. If the exported images don't meet your expectations, you could show me a comparison with the style of the note in reading mode.

I made a new TestVault (with only a few plugins) to better isolate the issues. The good thing: Most of the shown issues (screenshots with grey borders around the elements) are gone.

---

At the moment, I see only these issues:

• The lightgrey scrollbars at the right and at the bottom:

• A scrollbar in the embedded note:

• The output is cut at the end.

---

This is a screenshot of the 1280px note in view mode:

This is a screenshot of the 1280px note in edit mode:

[zhouhua]

Could you help by adding this CSS snippet to see if it resolves the issue?

.epxort-image-root,
.export-image-root *,
.export-image-root *::before,
.export-image-root *::after {
  overflow: hidden;
}

[merlinuwe]

Yes, thanks to your css I see more ...

In comparisson the notes end in view mode:

The text "20 tasks" are not in the output.

[zhouhua]

I'm unable to replicate your issue, making it difficult to debug. Could you share your vault with me?

[merlinuwe]

I'm unable to replicate your issue, making it difficult to debug. Could you share your vault with me?

Sure, but without the google plugin, because of the credentials.

2024-04-17-TestVault_export_image.zip

[zhouhua]

I believe I've resolved the scrollbar issue you encountered. It appears to be a bug in dom-to-image-more, where during the handling of table styles, the border properties were incorrectly inherited downwards, causing borders to stack and thus occupy more height.

This is the image I exported, and it appears to me to be very close to the reading mode style.

[merlinuwe]

I updated to the latest release 2.3.6 and deleted and deactivated the css file, you gave me.

I can confirm, the exported png, png transparent, jpg (640) are fine.

But the formats webp and pdf (640) are cut off at the end.

I tried up to 2560.

Because of the big amount of data (59,7 MB), I give you this link for downloading:

https://www.swisstransfer.com/d/82316084-3891-4841-88cc-9d983b6992ba

This is the console output:

[merlinuwe]

Some issues with numbering. This file

muell - Zifferndarstellung in MagicUser Theme.md

export to pdf works:

muell - Zifferndarstellung in MagicUser Theme2560.zip

but export to jpg, png, png transparent, webp are not working (they show no numbering):

It has nothing do do with MagicUser theme, because the standard theme gives the same results:

StandardTheme.zip

[zhouhua]

The first issue: Why are WebP images being truncated? This is a limitation of the WebP format, which supports a maximum resolution of 16383 x 16383. For reference: https://developers.google.com/speed/webp/faq?hl=de#what_is_the_maximum_size_a_webp_image_can_be

PDFs face a similar issue, with a maximum size limitation of 200 inches by 200 inches.

The second issue, why the numbers in ordered lists disappear, was a bug introduced while fixing the scrollbar issue. I will fix it shortly. Additionally, the CSS code snippet I previously gave you needs to be removed.

[zhouhua]

I believe the issue has been fixed.

[merlinuwe]

I tested png and jpg with release 2.3.7 in the TestVault.

The scrollbars are visible and the text "20 tasks" is missing again.

TestVault.zip

---

Edit-mode:

Output:

The checkmarks are not visible

---

Two Links are missing, they are in an embedded note:

Edit-mode:

View-mode:

The embedded note:

Weihnachtsferien 2023-24.md

Output:

[zhouhua]

UU11CINF(anonymisiert).png.zip

This is the image I exported using version 2.3.7, and these two issues you mentioned did not recur, which may be related to differences in operating systems. The disappearing link issue is hard to diagnose; I'll try to get access to a Windows pc to debug it in the next few days. Regarding the first issue with the scrollbar, could you please help by implementing a piece of CSS to test it out:

.epxort-image-root,
.export-image-root .markdown-preview-view {
  overflow: hidden;
}

[merlinuwe]

Your css gives this result:

The scrollbars are away, again. But the text "20 tracks" is cut ~ 50 % in the half.

[zhouhua]

Hi @merlinuwe, My investigation suggests that the Dataview component might generate scrollbars when exporting images, which could alter the final image height.

Please help by adding the following CSS code to verify if the issue is resolved (it works on my Windows computer):

.block-language-dataview {
  overflow: hidden !important;
}

If it works, I will fix it in the next version.

[merlinuwe]

Without your css and release 2.3.7:

Standard Theme:

With your css (as the only one activated) I get (often) this message while copying: "Kopieren fehlgeschlagen". Maybe I pressed the button to fast after opening the export-preview?

---

BTW: 4 days ago you gave me a css snippet with a typo (epxort --> export):

.epxort-image-root,
.export-image-root .markdown-preview-view {
  overflow: hidden;
}

I tried it with

.export-image-root,
.export-image-root .markdown-preview-view {
  overflow: hidden;
}

but I see no difference.

---

But I found something new:

The numbers are set to 0:

Background: I use this css to get numbers in tables:

Tabellennummerierungen.zip

Here is a screenshot with all resulting zero values (0.):

And the same as screenshots in view mode:

[zhouhua]

the numbering problem is fixed.

[merlinuwe]

Not in 2.3.7, I see numbers in the preview, but not in the output-files.

But in 2.3.9! Thank you VERY much for your work! ;-)