mathjax 导出svg和png

原创
2020/11/13 20:46
阅读数 332

 

原文链接: mathjax 导出svg和png

导出png是为了在使用过程中借助透明背景可以实现一个特殊的放置需求, 如果是jpg则因为白色背景会遮住后面的背景

 

一定要设置命名空间, 以及大小

  svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");

 

可以调整输出大小, 更加清晰的输出大图

  const scale = 2
  const w = +svg.getAttribute("width").replace("ex", "")
  const h = +svg.getAttribute("height").replace("ex", "")
  svg.setAttribute("width", scale * w + "ex")
  svg.setAttribute("height", scale * h + "ex")

 

可以设置字体颜色

  const list = Array.from(svg.getElementsByTagName("g"))
  console.log("list", list)

  list.forEach(i => i.setAttribute("fill", color))

 

 

svg的尺寸不好确定, 但是导入到img标签中, 在img标签渲染完毕后是可以拿到宽高的

 

1.6M ...

https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js

 

语法

https://oysz2016.github.io/post/8611e6fb.html

生成svg

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

 

只能使用web版本的, 这个库贼大, 而且不能使用import语法, 只能动态创建script然后再用

 

创建一个svg的base64的url, 然后交给img标签渲染, 最后使用canvas绘制

导出svg链接:

https://www.zhangxinxu.com/wordpress/2018/08/css-svg-background-image-base64-encode/

 

最后使用dom 序列化库, 生成dom的string, 导出字符串

因为svg中含有shadowdom, 结果这个库竟然也能导出, 有点厉害

<template>
  <img id="img" alt="Vue logo" src="./assets/logo.png" />
  <!-- <HelloWorld msg="Welcome to Your Vue.js App" /> -->
</template>

<script>
import ds from "dom-serialize";
export default {
  name: "App",
  async mounted() {
    const img = document.getElementById("img");
    console.log("ds", ds(img));
    const MathJax = window.MathJax;
    console.log(MathJax);
    // const lex = `E = mc^2`;
    const lex = `\\begin{align}
          \\nabla \\times \\vec{\\mathbf{B}} -\\, \\frac1c\\, \\frac{\\partial\\vec{\\mathbf{E}}}{\\partial t} & = \\frac{4\\pi}{c}\\vec{\\mathbf{j}} \\\\
          \\nabla \\cdot \\vec{\\mathbf{E}} & ; = 4 \\pi \\rho \\\\
          \\nabla \\times \\vec{\\mathbf{E}}\\, +\\, \\frac1c\\, \\frac{\\partial\\vec{\\mathbf{B}}}{\\partial t} & = \\vec{\\mathbf{0}} \\\\
          \\nabla \\cdot \\vec{\\mathbf{B}} & = 0
      \\end{align}`;

    console.log("lex", lex);
    const res = MathJax.tex2svg(lex);
    console.log("res", res);
    const canvas = document.createElement("canvas");
    const svg = res.children[0];
    console.log("svg", svg);
    const str = ds(svg);
    console.log(str);
    // const file = URL.createObjectURL(new Blob([str]));
    // console.log(file);
    // const a = document.createElement("a");
    // a.href = a.url = a.innerText = file;
    // a.download = "web-svg.svg";
    // document.body.appendChild(a);
    const img2 = new Image();
    const blob = new Blob([str], { type: "image/svg" });
    const file = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = a.url = a.innerText = file;
    document.body.appendChild(a);
    var encodeSvg = function(str) {
      return (
        "data:image/svg+xml," +
        str
          .replace(/"/g, "'")
          .replace(/%/g, "%25")
          .replace(/#/g, "%23")
          .replace(/{/g, "%7B")
          .replace(/}/g, "%7D")
          .replace(/</g, "%3C")
          .replace(/>/g, "%3E")
      );
    };
    a.download = "web-svg.svg";
    console.log("file", file);
    img2.src = encodeSvg(str);
    document.body.appendChild(img2);
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

 

 

使用svg压缩库 svgo 压缩, 大概能压缩百分之二十左右, 使用默认配置即可, 如有需求, 课采用插件自定义

目前没有找到在web端使用svgo的方法, 这个库依赖fs和path等node的api , 不过想要抽离也是不难, 就是懒得做了

https://github.com/svg/svgo

var FS = require("fs"),
  PATH = require("path"),
  SVGO = require("svgo"),
  filepath = PATH.resolve(__dirname, "./web-svg123.svg"),
  svgo = new SVGO();
FS.readFile(filepath, "utf8", function(err, data) {
  if (err) {
    throw err;
  }
  svgo.optimize(data, { path: filepath }).then(function(result) {
    console.log(result);
    FS.writeFileSync("out.svg", result.data);
  });
});


 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部