手把手集成web端手写公式功能
Posted 刺风’Blog
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了手把手集成web端手写公式功能相关的知识，希望对你有一定的参考价值。
何为手写公式，很简单，就是在网页上可以写出数学公式，并能够生成Latex格式的字符串。废话不多说，直接走正题。
一、首先大家可以先去官网了解一下myscript这个插件
官方网站：https://dev.myscript.com/
二、在去它的github上看一下这个项目
GitHub：https://github.com/MyScript/myscript-math-web
三、根据github上的介绍，要下载其插件首先你需要用到这个命令：
bower install myscript-math-web
注意：这里解释一下 bower 是个命令，需要安装node.js 具体什么关系的我就不在这里描述了，下面贴出两个网址自己看吧。
关系：https://segmentfault.com/q/1010000002855012
安装node.js:http://jingyan.baidu.com/article/2d5afd69e243cc85a2e28efa.html
安装Git：http://blog.csdn.net/renfufei/article/details/41647875
提示：别忘了配置环境变量，以及自己Github上的昵称和邮箱别忘了设置。
四、配置好后，执行bower install myscript-math-web 这个命令会在当前的目录下生成对应的myscript的js文件以及各种文件。
文件下载地址：http://pan.baidu.com/s/1i5JiFyt
提示：上面这个是我自己项目用的，已测试没问题。
五、关键代码：
<!doctype html> <html> <head> <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes"> <title>myscript-math-web demo</title> <script src="../../webcomponentsjs/webcomponents-lite.js"></script> <!-- <script src="polymer.js"></script> --> <link rel="import" href="../../polymer/polymer.html"> <script src="../../KaTeX/dist/katex.min.js"></script> <link rel="import" href="../../myscript-common-element/myscript-common-element.html"> <dom-module id="myscript-math-web"> <link rel="stylesheet" href="../../KaTeX/dist/katex.min.css"> <style> :host { display: block; } myscript-common-element { height: 100%; } myscript-common-element.result { height: calc(100% - 100px); } .resultField { font-size: larger; overflow: hidden; text-align: center; min-height: 95px; max-height: 95px; padding-top: 5px; position: relative } .katexcontainer { padding-top: 3px ; margin: 0; position: absolute; top: 50%; left: 50%; margin-right: -50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } </style> <template> <div id="resultField" class="resultField" hidden="[[ hideresult ]]"><div class="katexcontainer"></div></div> <myscript-common-element host="[[ host ]]" protocol="[[ protocol ]]" type="MATH" applicationkey="[[ applicationkey ]]" hmackey="[[ hmackey ]]" timeout="[[ timeout ]]" ssl="[[ ssl ]]" hidebuttons="[[ hidebuttons ]]" mathparameters="[[ _mathParameters ]]" canundo="{{ canundo }}" canredo="{{ canredo }}" canclear="{{ canclear }}" on-changed="_onChanged" on-success="_onSuccess" on-error="_onError"> </myscript-common-element> </template> </dom-module> <script> var myresult; Polymer({ is: \'myscript-math-web\', properties: { protocol: { type: String, value: MyScript.Protocol.WS }, host: { type: String, value: \'cloud.myscript.com\' }, timeout: { type: Number, value: 2000 }, applicationkey: { type: String }, hmackey: { type: String }, canundo: { type: Boolean, notify: true, value: false }, canredo: { type: Boolean, notify: true, value: false }, canclear: { type: Boolean, notify: true, value: false }, hidebuttons: { type: Boolean, value: false }, hideresult: { type: Boolean, value: false, observer: \'_hideresultChanged\' }, resulttypes: { type: Array, value: [] }, _mathParameters: { type: Object, computed: \'_computeMathParameters(resulttypes)\' }, result: { type: Object, notify: true }, ssl: { type: Boolean, value: true } }, _clear: function () { this._myscriptCommonElement.clear(); this.fire(\'myscript-math-web-delete\'); }, _undo: function () { this._myscriptCommonElement.undo(); }, _redo: function () { this._myscriptCommonElement.redo(); }, delete: function () { this._clear(); }, undo: function () { this._undo(); }, redo: function () { this._redo(); }, getStats: function () { if (this._myscriptCommonElement) { return this._myscriptCommonElement.getStats(); } }, _onChanged: function (e) { this.fire(e.type, e.detail); }, _onSuccess: function (e) { this.result = {}; if (e.detail.getDocument && e.detail.getDocument().getResultElements().length > 0) { var resultElements = e.detail.getDocument().getResultElements(); for (var res in resultElements) { this.result[resultElements[res].getType()] = resultElements[res].getValue(); } } var resultField = this.querySelector(\'.katexcontainer\'); if (Object.keys(this.result).length !== 0) { if (this.result.hasOwnProperty(\'LATEX\')) { try { katex.render(this._cleanLatexResult(this.result.LATEX), resultField); } catch (e) { resultField.innerHTML = "<span>"+this._cleanLatexResult(this.result.LATEX)+"</span>"; } } else { resultField.innerHTML = "<span>No LaTeX mathematic expression return to the result. Check your resulttypes attribut.</span>"; } } else { resultField.innerHTML = ""; } this.fire(\'myscript-math-web-result\', this.result); myresult=this.result; }, _onError: function (e) { this.fire(e.type, e.detail); }, ready: function () { this._myscriptCommonElement = this.querySelector(\'myscript-common-element\'); this._hideresultChanged(this.hideresult); }, _computeMathParameters: function (resulttypes) { var parameters = new MyScript.MathParameter(); parameters.setResultTypes(resulttypes); return parameters; }, _cleanLatexResult: function (latex) { return latex .replace("\\\\overrightarrow", "\\\\vec") .replace("\\\\llbracket", "\\\\lbracket") .replace("\\\\rrbracket", "\\\\rbracket") .replace("\\\\widehat", "\\\\hat") .replace(new RegExp("(align.{1})", "g"), "aligned"); }, _hideresultChanged: function (hideresult) { if (this._myscriptCommonElement) { if (hideresult) { this._myscriptCommonElement.classList.remove(\'result\'); } else { this._myscriptCommonElement.classList.add(\'result\'); } } } }); //保存函数 function saveFn(){ CloseWindow(myresult); } //关闭函数 function closeFn(){ CloseWindow("close"); } // 关闭弹出窗口 function CloseWindow(action) { if (window.CloseOwnerWindow) { return window.CloseOwnerWindow(action); } else { window.close(); } } function mouseOver(e) { e.src= "finish_show.png"; } function mouseOut(e) { e.src= "finish.png"; } function mouseOver1(e) { e.src= "close_show.png"; } function mouseOut1(e) { e.src= "close.png"; } </script> </head> <style> body { margin: 0; height: 100vh; } myscript-math-web { height: 100%; } .myimg{ cursor:pointer; margin-top: 4px; } </style> <body touch-action="none" unresolved> <template id="app" is="dom-bind"> <myscript-math-web host="webdemoapi.myscript.com" applicationkey="22eda92c-10af-40d8-abea-fd4093c17d81" hmackey="a1fa759f-b3ce-4091-9fd4-d34bb870c601"> </myscript-math-web> </template> <div align="center" style="position:fixed;bottom:0;height:50px;width:100%;background:url(icon.png) repeat-x 0 0 ;_position:absolute;_margin-top:expression(this.style.pixelHeight+document.documentElement.scrollTop);z-index: 3;"> <img src="finish.png" onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" title="完成" class="myimg" onclick="saveFn()" /> <img src="close.png" onmouseover="mouseOver1(this)" onmouseout="mouseOut1(this)" title="关闭" class="myimg" onclick="closeFn()" /> </div> </body> </html>
就在四点中文件夹下bower_components\\myscript-math-web\\demo\\aa.html
六、将获取到的latex格式的字符串如何转化成图片呢?
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <% String title = "作业模板"; // 标题 %> <%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%> <c:set var="ctx" value="${pageContext.request.contextPath}" /> <html> <head> <!-- ueditor编辑器使用的js文件 --> <script type="text/javascript" charset="utf-8" src="${ctx}/scripts/ueditor/ueditor.config.js"></script> <script type="text/javascript" charset="utf-8" src="${ctx}/scripts/ueditor/ueditor.all.js"> </script> <script type="text/javascript" charset="utf-8" src="${ctx}/scripts/ueditor/lang/zh-cn/zh-cn.js"></script> <script type="text/javascript" src="${ctx}/scripts/mathjax/MathJax.js?config=TeX-AMS-MML_HTMLorMML-full"></script> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>作业模板</title> <style type="text/css"> .tple_textarea { float: left; margin-left: 50px; } .tple_textarea textarea { width: 800px; height: 170px; } .tple_que { width: 80%; height: 200px; margin: 40px 0 0 20px; } .tple_que>img { float: left; } .tple_choose { height: 50px; margin-top: 20px; } .tple_choose_ { margin: 6px 0 0 70px; font-family: 黑体; font-size: 18px; color: #28C1A2; float: left; color: #28C1A2; } .tple_type div { float: left; } .tple_type_bt { width: 66px; height: 30px; margin-left: 20px; border: none; font-family: 黑体; font-size: 16px; outline: 0; margin-left: 20px; -moz-border-radius: 8px; border-radius: 8px; outline: 0; } .tple_type_bt_nochecked { background-color: #FFF; color: #7A7A7A; } .tple_type_bt_checked { background-color: #28C1A2; color: #FFF; } .tple_select { margin: 0px 0px 0px 62px; } .tple_fillin_num { width: 100px; height: 30px; border: 2px solid #28C1A2; float: right; outline: 0; } .tple_fillin_num_ { float: right; margin: 5px 8px 0 0; font-size: 16px; font-family: 黑体; font-size: 16px; } .tple_ans_ { margin: 15px 0 0 70px; font-family: 黑体; font-size: 18px; color: #28C1A2; float: left; } .tple_answer form>input { width: 23px; height: 20px; margin: 15px 0 0 40px; } .container label { position: relative; left: 6px; bottom: 3px; font-size: 20px; font-family: 黑体; } .tple_fillin_item { width: 90%; margin-left: 7%; height: 50px; float: left; } .tple_fillin_empty { width: 70px; float: left; margin-left: 5px; border: none; text-align: center; border-bottom: solid #000 1px; outline: 0; color: #797979; font-size: 12px; } .tple_fillin_number { width: 800px; } .tple_fillin_number { width: 50px; text-align: center; border: none; float: left; } tple_fillin_bt { margin: 10px 0 0 10px; float: left; } .tple_add { width: 22px; height: 22px; margin-left: 5px; border: none; outline: 0; background: url(/cfs/image/images/homeworktemplate_fillin_add.png) no-repeat; } .tple_minus { width: 22px; height: 22px; margin-left: 5px; border: none; outline: 0; background: url(/cfs/image/images/homeworktemplate_fillin_minus.png) no-repeat; } .tple_text { margin: 50px 0 40px -35px; } .tple_button { width: 500px; height: 45px; margin-top: 120px; } .tple_sub { width: 160px; height: 45px; border: none; outline: 0; font-family: 黑体; font-size: 20px; color: #FFF; float: left; margin-bottom: 20px; } .tple_ctuadd { margin-left: 100px; background-color: #28C1A2; } .tple_sas { margin-left: 40px; background-color: #F1C46F; } .mini-panel-border{ border: none; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } .mini-window .mini-panel-header { border:none; color: #FFF; background: #28C1A2; } .mini-panel-viewport{ border: none; } .mini-tools-close{ /* background: url(images/tools/close.gif) no-repeat 50% 1px; */ } .mini-messagebox-content{ color: #797979; } .mini-messagebox-content>div>input { padding-left: 5px; border: #28C1A2 solid 1px; outline: none; } .mini-button, a.mini-button { border:none; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; background: #28C1A2; color: #FFF; } body a:hover.mini-button{ border: none; background: #28C1A2; filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5; } .side-bar a,.chat-tips i {background: url(${ctx}/image/images/right_bg.png) no-repeat;} .side-bar {width: 66px;position: fixed;bottom: 20px;right: 25px;font-size: 0;line-height: 0;z-index: 1003;} .side-bar a {width: 66px;height: 66px;display: inline-block;background-color: #ddd;margin-bottom: 2px;} .side-bar a:hover {background-color: #669fdd;} .side-bar .icon-qq {background-position: 0 -62px;} .side-bar .icon-chat {background-position: 0 -130px;position: relative;} .side-bar .icon-blog {background-position: 0 -198px;} .side-bar .icon-mail {background-position: 0 -266px;} .side-bar .icon-chat:hover .chat-tips {display: block;} .chat-tips {padding: 20px;border: 1px solid #d1d2d6;position: absolute;right: 78px;top: -55px;background-color: #fff;display: none;} .chat-tips i {width: 9px;height: 16px;display: inline-block;position: absolute;right: -9px;top: 80px;background-position:-88px -350px;} .chat-tips img {width: 138px;height: 138px;} .zz_bg{display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%;z-index: 1001;overflow:hidden; } .zz_show{display: none; position: absolute; top: 12%; left: 100%; width: 60%; height: 75%; padding: 8px; border: 3px solid #28C1A2; background-color: white; z-index:1002; overflow: auto; padding: 0px;} .ques_bg{color:#797979;font-size: 16px; border-bottom: 1px solid #EBEBEB;padding: 5px;background-color:white;} .ques_tx{color:#50C2A7;} .ques_font{color:#EE4000;} .ques_ckda{font-size:20px;} </style> </head> <body> <div class="container" id="container"> <div class="iframe_header"> <div class="ifram_header_icon"> <img src="/cfs/image/images/new_homework.png"> </div> <div class="ifram_header_text"><%=title%></div> <button id="tple_back" class="iframe_header_back"></button> </div> <div class="tple_que"> <div class="tple_textarea"> <!-- <textarea id="tple_stem_text">11111111</textarea> --> <script id="tple_stem_text" type="text/plain" style="width:700px;height:150px;"></script> </div> </div> <div class="tple_choose"> <nobr class="tple_choose_">题型</nobr> <div class="tple_type"> <div> <button class="tple_type_bt tple_type_bt_nochecked" value="tple_single">单选题</button> <button class="tple_type_bt tple_type_bt_nochecked" value="tple_many">多选题</button> <button class="tple_type_bt tple_type_bt_nochecked" value="tple_judge">判断题</button> <button class="tple_type_bt tple_type_bt_nochecked" value="tple_fillin">填空题</button> <button class="tple_type_bt tple_type_bt_nochecked" value="tple_text">写作题</button> </div> <div class="tple_select"> <select id="tple_fillin_num" class="tple_fillin_num"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> </select> <nobr class="tple_fillin_num_">小题数</nobr> </div> </div> </div> <div class="tple_ans"> <nobr class="tple_ans_">答案</nobr> <div id="tple_empty" style="height: 45px;"></div> <div class="tple_answer"> <form id="tple_single" class="tple_single tple_tple"> <input id="tple_single_A" type="radio" name="single" value="A"><label for="tple_single_A">A</label> <input id="tple_single_B" type="radio" name="single" value="B"><label for="tple_single_B">B</label> <input id="tple_single_C" type="radio" name="single" value="C"><label for="tple_single_C">C</label> <input id="tple_single_D" type="radio" name="single" value="D"><label for="tple_single_D">D</label> </form> <form id="tple_many" class="tple_many tple_tple"> <input id="tple_many_A" type="checkbox" name="many" value="A" ><label for="tple_many_A">A</label> <input id="tple_many_B" type="checkbox" name="many" value="B"><label for="tple_many_B">B</label> <input id="tple_many_C" type="checkbox" name="many" value="C"><label for="tple_many_C">C</label> <input id="tple_many_D" type="checkbox" name="many" value="D"><label for="tple_many_D">D</label> </form> <form id="tple_judge" class="tple_judge tple_tple"> <input id="tple_judge_√" type="radio" name="judge" checked="checked" value="对"><label for="tple_judge_√">√</label> <input id="tple_judge_×" type="radio" name="judge" value="错"><label for="tple_judge_×">×</label> </form> <div id="tple_fillin" class="tple_fillin tple_tple"></div> <div id="tple_text" class="tple_text tple_tple tple_textarea"> <script id="tple_text_text" type="text/plain" style="width:700px;height:150px;"></script> </div> </div> </div> <div class="tple_button"> <button id="tple_ctuadd" class="tple_ctuadd tple_sub">继续添加</button> <button id="tple_sas" class="tple_sas tple_sub">保存预览</button> </div> </div> <div class="side-bar"> <a href="javascript:void(0);" onclick="showQuesTempFn()" class="icon-qq" title="题库模板"></a> <a href="javascript:void(0);" onclick="showMycollectFn()" class="icon-chat" title="我的收藏"></a> <a href="javascript:void(0);" onclick="hideFn()" class="icon-blog" title="关闭模板"></a> <a href="#container" class="icon-mail" title="回到顶部" ></a> </div> <div class="zz_bg" > <div class="zz_show"> </div> </div> <script type="text/javascript"> var userData = new Object(); userData.user_id = "${param.user_id}"; userData.homework_id = "${param.homework_id}"; userData.section_id = "${param.section_id}"; userData.textbook_id = "${param.textbook_id}"; userData.homework_name = "${param.homework_name}"; userData.worktype = "${param.worktype}"; userData.que_no = "${param.que_no}"; $.extend({ \'tple_choose\' : function(id, type) { $("#" + type + "").show(); $("#" + type + "").siblings().hide(); } }); var ue,ue1,bool=true; // 保存试题参数 var queNo = userData.que_no; var squeParam = { homework_id : userData.homework_id, question_no : queNo }; var count1 = 1, count2, fillinNum = 1; $(document) .ready( function() { ue = UE.getEditor(\'tple_stem_text\', { serverUrl: "${ctx}/work/hw/getImgServer.ac", toolbars: [ [ \'sxgs\',//手写公式 \'undo\', //撤销 \'redo\', //重做 \'formatmatch\', //格式刷 \'removeformat\', //清除格式 \'simpleupload\', //单图上传 // \'insertimage\', //多图上传 \'searchreplace\', //查询替换 \'justifyleft\', //居左对齐 \'justifyright\', //居右对齐 \'justifycenter\', //居中对齐 \'justifyjustify\', //两端对齐 \'insertorderedlist\', //有序列表 \'insertunorderedlist\', //无序列表 \'fullscreen\' //全屏 ] ], autoHeightEnabled: false }); ue1 = UE.getEditor(\'tple_text_text\', { serverUrl: "${ctx}/work/hw/getImgServer.ac", toolbars: [ [ \'sxgs1\',//手写公式 \'undo\', //撤销 \'redo\', //重做 \'formatmatch\', //格式刷 \'removeformat\', //清除格式 \'searchreplace\', //查询替换 \'justifyleft\', //居左对齐 \'justifyright\', //居右对齐 \'justifycenter\', //居中对齐 \'justifyjustify\', //两端对齐 \'insertorderedlist\', //有序列表 \'insertunorderedlist\', //无序列表 \'fullscreen\' //全屏 ] ], autoHeightEnabled: true, autoFloatEnabled: true }); //手写公式 baidu.editor.commands[\'sxgs\'] = { execCommand: function() { var bool=jdllqFn(); if(bool){ var win = mini.open({ url : "${ctx}/scripts/bower_components/myscript-math-web/demo/aa.html", title : "手写公式", width : 800, height : 500, showMaxButton : true, ondestroy : function(action) { if(action&&action!="close"){ var latexImg="<img src=\'http://latex.codecogs.com/gif.latex?"+action.LATEX+"\'/>"; var str=ue.getContent()+latexImg; ue.setContent(str,false); } } }); } return true; }, queryCommandState: function() { } }; //手写公式 baidu.editor.commands[\'sxgs1\'] = { execCommand: function() { var bool=jdllqFn(); if(bool){ var win = mini.open({ url : "${ctx}/scripts/bower_components/myscript-math-web/demo/aa.html", title : "手写公式", width : 800, height : 500, showMaxButton : true, ondestroy : function(action) { if(action&&action!="close"){ var latexImg="<img src=\'http://latex.codecogs.com/gif.latex?"+action.LATEX+"\'/>"; var str=ue1.getContent()+latexImg; ue1.setContent(str,false); } } }); } return true; }, queryCommandState: function() { } }; $(".tple_tple").hide(); $(".tple_select").hide(); $(".tple_type_bt").on(\'mousedown\',function() { var tple_type = $(this).val(); $(this).removeClass("tple_type_bt_nochecked") .addClass("tple_type_bt_checked"); $(this).siblings().removeClass("tple_type_bt_checked") .addClass("tple_type_bt_nochecked"); $.tple_choose(this, tple_type); switch (tple_type) { case "tple_single": squeParam.question_type = 1; $(".tple_select").hide(); $("#tple_empty").hide(); break; case "tple_many": squeParam.question_type = 2; $(".tple_select").hide(); $("#tple_empty").hide(); break; case "tple_judge": squeParam.question_type = 3; $(".tple_select").hide(); $("#tple_empty").hide(); break; case "tple_fillin": squeParam.question_type = 4; $(".tple_select").show(); $("#tple_empty").hide(); break; case "tple_text": squeParam.question_type = 5; $(".tple_select").hide(); $("#tple_empty").hide(); break; default: break; } }); //填空题动态生成答案空 //初始生成个空 $("#tple_fillin").append( "<div class=\'tple_fillin_item\'><input type=\'text\' class=\'tple_fillin_number\' readonly=\'readonly\' value=\'(" + fillinNum + ")\'><input type=\'text\' class=\'tple_fillin_empty\'><div class=\'tple_fillin_bt\'><button onclick=\'onAddClick(this)\' class=\'tple_add\'></button><button onclick=\'onMinusClick(this)\' class=\'tple_minus\'></button></div></div>"); $("#tple_fillin_num").on(\'change\',function() { count2 = $(this).val(); if (count2 > count1) { for (var i = 0; i < (count2 - count1); i++) { fillinNum++; $("#tple_fillin").append( "<div class=\'tple_fillin_item\'><input type=\'text\' class=\'tple_fillin_number\' readonly=\'readonly\' value=\'(" + fillinNum + ")\'><input type=\'text\' class=\'tple_fillin_empty\'><div class=\'tple_fillin_bt\'><button onclick=\'onAddClick(this)\' class=\'tple_add\'></button><button onclick=\'onMinusClick(this)\' class=\'tple_minus\'></button></div></div>"); } } else if (count2 < count1) { for (var j = 0; j < (count1 - count2); j++) { $(".tple_fillin_item").last().remove(); fillinNum--; } } count1 = count2; }); /* * 保存当前试题，继续添加试题 */ var squeUrl = "work/addquestions"; $("#tple_ctuadd").on(\'click\',function() { var str=ue.getContent(); str=str.replace(/\\\\cfs\\/pictures\\//g, ""); str=replaceSXGS(str); squeParam.stem_text =str; switch (squeParam.question_type) {以上是关于手把手集成web端手写公式功能的主要内容，如果未能解决你的问题，请参考以下文章
手把手写Generative score-based models代码
Android + Web网络商城源代码 Android网络商城源代码 Android前端源代码+Java Web后端源代码的（手把手教您导入项目）
Android + Web网络商城源代码 Android网络商城源代码 Android前端源代码+Java Web后端源代码的（手把手教您导入项目）（无框架项目-结课作业/毕业设计）