search

observablehq / feedback

Customer submitted bugs and feature requests
42 stars 3 forks source link

mermaid template literal shows 'Download to PNG' active, but clicking it does nothing #416

Open aaronkyle opened 2 years ago

aaronkyle commented 2 years ago

Describe the bug Using the mermaid template literal, the options menu for a rendered visualization shows 'download PNG' as enabled (if that's the right term?). However clicking this cell does nothing.

To Reproduce Steps to reproduce the behavior:

  1. Use the mermaid template literal to make something
  2. Click on '....'
  3. Scroll down to 'download PNG'
  4. See nothing

Expected behavior Either a non-active download option or a download to PNG output.

Screenshots active-mermaid-menu

Desktop (please complete the following information):

CobusT commented 2 years ago

From a discussion thread about this topic:

It’s a security error: Failed to execute 'toBlob' on 'HTMLCanvasElement': Tainted canvases may not be exported. It has to do with how Mermaid constructs the canvases.

For what it's worth, https://observablehq.com/@bumbeishvili/foreignobject-exporting-issue manages to generate a PNG from a Mermaid graph. I wasn't able to spot the differences to Observable's implementation yet, since the code there is complex and heavily minified. The difference is that Observable's implementation creates the image URL via URL.createObjectURL(), while David's example constructs a utf8 data URL. Chrome supposedly limits URLs to 2MB. I'm not sure if this also applies to programmatically set URLs, but it would severely limit how this workaround can be applied.

mootari commented 2 years ago

@mythmon pointed out that the export works in Firefox.