[Feature]: Write out the equation as an image

[ichibha]

A feature for consideration. Is it possible to write out the equation as an image? Users may want to paste the equation to their powerpoint. Screenshot does not allow transparent background, limiting the slide design.

[arnog]

This is possible using a third-party library.

See https://github.com/arnog/mathlive/tree/master/examples/latex

[ichibha]

@arnog Thank you! I use it.

[ichibha]

The following function worked to download the entire of the math field:

htmlToImage
    .toPng(document.getElementById('formula'))
    .then((data) => {
        var link = document.createElement('a');
        link.download = 'formula.png';
        link.href = data;
        link.click();
    });

However, changing document.getElementById('formula') to document.getElementById('formula').querySelector('.ML__mathlive') made an error because document.getElementById('formula').querySelector('.ML__mathlive') returns null.

How could I retrieve the equation element only? I use "mathlive": "^0.86.0" and MacOS 13.2（22D49）.

The example you provided made the following error with Google Chrome:

Access to script at 'file:///dist/mathlive.mjs' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.
mathlive.mjs:1          Failed to load resource: net::ERR_FAILED
index.html:1 Access to script at 'file:///Users/maezono/Dropbox/Repositories/mathlive/examples/latex/html-to-image/index.mjs' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.
index.mjs:1          Failed to load resource: net::ERR_FAILED

[arnog]

The CORS errors are expected if you try to open the HTML file directly. It needs to be served by a local server. If you use VS Code you can try the Live Server plugin.

The other error is because you are trying to access the content of a shadowed element. By design they are not visible to the outside. That said, I'm not sure exactly what you are trying to do. If you only want to render the formula, you could extract the LaTeX (mf.value) then call converLatexToMarkup() and render that to an image.

[ichibha]

Yes, I only wanted to render the formula. Your solution worked. Thank you! I opened the HTML file as you expected. Thank you for the solution.