Question

我正在构建一个只允许对象呈现功能的库来返回自身表示的DOM元素，其中一个是数学，所以<img>，<canvas>或<svg>会这样做，我更喜欢svg。

Mathjax因此非常擅长，但我需要更多的东西：

Mathjax.Latex('\frac{2}{1}').toSVG(); //svg DOM node or string
Mathjax.Latex('\frac{2}{1}').toImage(); //Image, img node, or base64

我知道mathjax-node有可能，但是它是否与mathjax客户端有关？ https://github.com/mathjax/MathJax-node

Answer 1

没有内置方法。但你显然可以建立一些东西。

这是一个快速而肮脏的例子。注意，此示例将MathJax配置为不将其globalCache用于SVG路径;这使得SVG输出易于重复使用。渲染分离的DOM节点也有一些注意事项; MathJax必须猜测上下文（CSS，字体指标等）。

＆＃13;

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://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js';
  d.getElementsByTagName('head')[0].appendChild(script);
}(document));

＆＃13;

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

＆＃13;

Answer 2

对于MathJax 3：

<?php
//get images from sql in phparray
$array_image            =GetSqlData_Assoc($query_getimg,$db);
/* 
var_dump of $array_image
 array(2) 
{
 [0]=>
  array(1) 
     {
      ["File"]=>blob
     }
 [1]=>
  array(1) 
     {
      ["File"]=>blob
     }
 }
*/
$array_image_encode =json_encode($array_image);

?>

<!doctype html>
<!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<head>
<meta name="viewport" content="width = 1050, user-scalable = no" />
<script type="text/javascript" src="plugin/turnjs4/extras/jquery.min.1.7.js"></script>
<script type="text/javascript" src="plugin/turnjs4/extras/modernizr.2.5.3.min.js"></script>
<script>
    const b64toBlob = (b64Data, contentType='', sliceSize=512) =>
    {
        const byteCharacters = atob(b64Data);
        const byteArrays = [];

        for (let offset = 0; offset < byteCharacters.length; offset += sliceSize)
        {
            const slice = byteCharacters.slice(offset, offset + sliceSize);
            const byteNumbers = new Array(slice.length);
            for (let i = 0; i < slice.length; i++)
            {
                byteNumbers[i] = slice.charCodeAt(i);
            }
            const byteArray = new Uint8Array(byteNumbers);
            byteArrays.push(byteArray);
        }

        const blob = new Blob(byteArrays, {type: contentType});
        return blob;
    }
    $( document ).ready(function() {

        var options = {
                        pages:[]
                      };    

                var array_sql_imgs = <?php echo JSON_encode($array_image) ?>;
                console.log(array_sql_imgs);//not display anything
                for(var i=0; i<array_sql_imgs.length; i++)
                {
                    var img             =array_sql_imgs[i]['file'];
                    const contentType   ='image/jpeg';
                    const b64Data       =img;
                    const blob          =b64toBlob(b64Data, contentType);
                    const blobUrl       =URL.createObjectURL(blob);
                    options['pages'].push(blobUrl);
                }    
    })
</script>
</head>

<body>

<div class="flipbook-viewport">
    <div class="container">
        <div class="flipbook">
        </div>
    </div>
</div>


<script type="text/javascript">

function loadApp() {

    // Create the flipbook

    $('.flipbook').turn({
            // Width

            width:922,

            // Height

            height:600,

            // Elevation

            elevation: 50,

            // Enable gradients

            gradients: true,

            // Auto center this flipbook

            autoCenter: true

    });
}

// Load the HTML4 version if there's not CSS transform

yepnope({
    test : Modernizr.csstransforms,
    yep: ['plugin/turnjs4/lib/turn.js'],
    nope: ['plugin/turnjs4/lib/turn.html4.min.js'],
    both: ['plugin/turnjs4/samples/basic/css/basic.css'],
    complete: loadApp
});

</script>

</body>
</html>

代码：

<script>
  window.MathJax = {
    // options
  };
</script>
<script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>

使用mathjax或类似方法将Latex / MathML转换为SVG或Image？

2 个答案: