Convert mathjax output to png

Question

I am triying to convert mathjax output to png file, I used code like below, I have an html code like

<div id="target"></div> and a js file like,

window.MathJax = {
  jax: ["input/TeX", "output/SVG"],
  extensions: ["tex2jax.js", "MathMenu.js", "MathZoom.js"],
  showMathMenu: false,
  showProcessingMessages: false,
  messageStyle: "none",
  SVG: {
    useGlobalCache: false
  },
  TeX: {
    extensions: ["AMSmath.js", "AMSsymbols.js", "autoload-all.js"]
  },
  AuthorInit: function() {
    MathJax.Hub.Register.StartupHook("End", function() {
      var mj2img = function(texstring, callback) {
        var input = texstring;
        var wrapper = document.createElement("div");
        wrapper.innerHTML = input;
        var output = { svg: "", img: ""};
        MathJax.Hub.Queue(["Typeset", MathJax.Hub, wrapper]);
        MathJax.Hub.Queue(function() {
          var mjOut = wrapper.getElementsByTagName("svg")[0];
          mjOut.setAttribute("xmlns", "http://www.w3.org/2000/svg");
          // thanks, https://spin.atomicobject.com/2014/01/21/convert-svg-to-png/
          output.svg = mjOut.outerHTML;
          var image = new Image();
          image.src = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(output.svg)));
          image.onload = function() {
            var canvas = document.createElement('canvas');
            canvas.width = image.width;
            canvas.height = image.height;
            var context = canvas.getContext('2d');
            context.drawImage(image, 0, 0);
            output.img = canvas.toDataURL('image/png');
            callback(output);
          };
        });
      }
      mj2img("\\[f: X \\to Y\\]", function(output){
        document.getElementById("target").innerText = output.img + '\n' + output.svg;
      });
    });
  }
};

(function(d, script) {
  script = d.createElement('script');
  script.type = 'text/javascript';
  script.async = true;
  script.onload = function() {
    // remote script has loaded
  };
  script.src = 'https://cdn.mathjax.org/mathjax/latest/MathJax.js';
  d.getElementsByTagName('head')[0].appendChild(script);
}(document));

But I get some garbage value and an svg code. Check here. How to make it work to convert png file in browser?

You're dumping the base64 image data into the target as a string. You need to display it as an image. `const t = document.getElementById("target"); const i = document.createElement('img'); i.src = output.img; t.append(i);` — pilchard, Nov 04 '21 at 13:28
@pilchard Thanks, that worked. Write as answer, I will accept it. — J C, Nov 04 '21 at 14:06

score 1 · Accepted Answer · answered Nov 04 '21 at 14:59

1

You are currently concatenating and displaying both the Base64 image data and the SVG output as strings and assigning the result as as string to the target's innerText.

Instead, the Base64 data should be displayed as an <img> element (see: How to display Base64 images in HTML), while the SVG can be assigned as the innerHTML of a container element.

mj2img('\\[f: X \\to Y\\]', function (output) {
  // document.getElementById("target").innerText = output.img + '\n' + output.svg;

  const target = document.getElementById('target');

  const img = document.createElement('img');
  img.src = output.img;

  const svg_container = document.createElement('div');
  svg_container.innerHTML = output.svg;

  target.append(img, svg_container);
});

answered Nov 04 '21 at 14:59

pilchard

12,414
5
11
23

How to display image when `keyup` a form containing textarea having id `tarea`. I edited question. – J C Nov 06 '21 at 07:14
I updated question, can you please look into it? – J C Nov 07 '21 at 03:10
That's not how stackoverflow works. If you have a second question you should post a new question rather than tacking it on to an already answered question. Also revoking the accepted status because the answer doesn't fit your highly revised question is not appropriate. You can visit the [help center](https://stackoverflow.com/help), take the [tour](https://stackoverflow.com/tour) to see what and [How to Ask](https://stackoverflow.com/questions/how-to-ask) for further guidelines. – pilchard Nov 07 '21 at 11:12
1

Sorry for the trouble, I will ask as another question – J C Nov 07 '21 at 13:00

Convert mathjax output to png

1 Answers1