如何解决MathJax转PNG出现乱码问题 实现在浏览器端生成PNG文件

你的代码存在两个核心问题导致无法正常显示PNG：

1. 你使用的cdn.mathjax.org域名已经正式废弃，无法正常加载MathJax资源
2. 你将PNG的base64 DataURL直接赋值给了innerText，所以只会显示字符串乱码，不会渲染为图片

具体修改步骤 #

• 替换MathJax资源地址，改用稳定的CDN源
• 修改回调逻辑，将返回的PNG DataURL赋值给img元素的src属性，再插入到页面中，不要用innerText渲染

完整可运行代码 #

HTML部分 #

<div id="target"></div>

JS部分 #

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");
          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){
        const target = document.getElementById("target");
        // 渲染PNG图片
        const imgEl = document.createElement("img");
        imgEl.src = output.img;
        target.appendChild(imgEl);
        // 可选：添加下载按钮
        const downloadEl = document.createElement("a");
        downloadEl.innerText = "下载PNG";
        downloadEl.download = "math.png";
        downloadEl.href = output.img;
        target.appendChild(document.createElement("br"));
        target.appendChild(downloadEl);
      });
    });
  }
};

(function(d, script) {
  script = d.createElement('script');
  script.type = 'text/javascript';
  script.async = true;
  script.src = 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.9/MathJax.js';
  d.getElementsByTagName('head')[0].appendChild(script);
}(document));

内容的提问来源于stack exchange，提问作者J C