Vue + MathLive 实现数学公式可编辑
效果图
一.环境
webpack cli4.0
html2canvas 插件
二.配置
在index.html 下 引用 mathlive js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<script src="https://unpkg.com/mathlive"></script>
<!-- built files will be auto injected -->
</body>
</html>
main.js 设置 vue对象的 prototype
const MathLive = require('MathLive')
Vue.prototype.$MathLive = MathLive
由于在cli4.0 之后 没有webpack.base.config, 所以根据官方文档参考，在根项目下创建 vue.config.js 文件
并往内编写如下代码：
const path = require('path')
module.exports = {
configureWebpack: {
externals: {
'MathLive': 'MathLive'
}
}
}
三.编写代码
<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;
}
</style>
如果看不到公式的话：在 App.vue 内 添加CSS样式修改一下
body.ML__fonts-loading .ML__base {
visibility: visible!important;
}
转载：https://www.jianshu.com/p/6cbb35cb9d3a