x01 环境

webpack cli2.0
html2canvas 插件

x02 配置

在index.html 下引用 mathlive js

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>hello_mathlive</title>
  <link rel="stylesheet" href="./static/style.css" />
</head>

<body>
  <div id="app"></div>
  <script src="https://unpkg.com/mathlive"></script>
  <!-- built files will be auto injected -->
  <script type="text/javascript">
  </script>
</body>

</html>

main.js 设置 vue对象的 prototype

const MathLive = require('MathLive')
Vue.prototype.$MathLive = MathLive

在 webpack.base.conf.js 设置 externals

'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}



module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  },
  node: {
    // prevent webpack from injecting useless setImmediate polyfill because Vue
    // source contains it (although only uses it if it's native).
    setImmediate: false,
    // prevent webpack from injecting mocks to Node native modules
    // that does not make sense for the client
    dgram: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    child_process: 'empty'
  },
  externals:{
    'MathLive':'MathLive'
  }
}

x03 编写代码

在vue文件内编写一个简单示例。

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <main>
      <div class="mathfield" id="mf">
        $$\nexists \exists f(x)+\frac{3i}{y\cdot h}$$
        <!-- $$\frac{\text{a\textit{b\textbf{\textsf{c}d}}}}{\mathbf{e\mathit{f}\mathbb{G}}}$$ -->
      </div>
      <!-- <div class="output" id="latex"></div>
      <div class="output" id="mathjson"></div>-->
    </main>

    <h3>---------- 测试 -----------</h3>
    <button @click="bntClick">测试将公式转图片</button>
    <button @click="bntClick2">清除公式</button>
    <br />
    <p>演示效果</p>
    <img :src="testImg" alt />
    <br />

    <h3>--- 测试 canvas ---</h3>
    <div class="myCanvas">
      <canvas id="canvas" width="880" height="680" ref="canvas" />
    </div>
  </div>
</template>

<script>
import html2canvas from "html2canvas";

export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "测试 mathlive",
      testImg: "",
      MathLive: null,
    };
  },
  methods: {
    bntClick() {
      // var copyDom = this.$refs.ff.cloneNode(true); //克隆dom节点
      var dom = document.querySelector(".ML__mathlive");
      var copyDom = dom.cloneNode(true);
      copyDom.style.position = "absolute"; // 绝对位置
      copyDom.style.top = "0px"; // 顶部
      copyDom.style.zIndex = "-100"; // 图层下面，好似不起作用 会先闪现一下，暂时未想到如何一开始就让其在图层下

      document.body.appendChild(copyDom); //把copy的截图对象追加到body后面

      var rect = copyDom.getBoundingClientRect(); //获取元素相对于视察的偏移量

      var width = rect.width; //dom宽
      // var height = rect.height; //dom高
      var height = copyDom.clientHeight; //dom高

      console.log(width, height);
      console.log(rect);

      var scale = 1; //放大倍数
      var canvas = document.createElement("canvas"); //创建画布
      canvas.width = width * scale; //canvas宽度
      canvas.height = height * scale; //canvas高度
      var ctx = canvas.getContext("2d");
      ctx.scale(scale, scale);

      html2canvas(copyDom, {
        scale: scale,
        canvas: canvas,
        width: width,
        heigth: height,
        background: "#fff",
        scrollY: 0,
        scrollX: 0,
        x: 0,
        y: 0,
      }).then((canvas) => {
        let dataUrl = canvas.toDataURL("image/png");
        console.log(dataUrl);
        this.testImg = dataUrl;
        copyDom.remove();

        var img = new Image();
        this.ctx.drawImage(canvas, 150, 150);
      });
    },
    bntClick2() {
      console.log(this.$MathLive)
      // document
      //   .querySelector("#mathf")
      //   .mathfield.$insert("AAA", { insertionMode: "replaceAll" });
         this.MathLive.$insert("AAA", { insertionMode: "replaceAll" })
         console.log(this.MathLive.$text())
    },

    initCanvas() {
      this.canvas = this.$refs.canvas; //指定canvas
      this.ctx = this.canvas.getContext("2d"); //设置2D渲染区域
      // this.ctx.lineWidth = 5; //设置线的宽度
    },
    initMathlive() {
      this.MathLive = this.$MathLive.makeMathField("mf", {
        smartMode: true,
        virtualKeyboardMode: "manual",
        onContentDidChange: (mf) => {
          const latex = mf.$text();
        },
      });
    },
  },

  mounted() {
    console.log(this.$MathLive);
    console.log(this);
    this.initMathlive()
    this.initCanvas();
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}

body.ML__fonts-loading .ML__base {
  visibility: visible !important;
}
</style>