├── README.md
├── donatelist.md
├── index.html
└── test1.gif


/README.md:
--------------------------------------------------------------------------------
 1 | # MathF
 2 | 
 3 | ## 更新: 由于经济原因本人已无意愿继续维护此服务，有愿意继续接手的人可以[点击此处](https://t.me/FuckerQu)与我联系，谢谢 = =
 4 | 
 5 | ## 更新：支持快捷键，Word公式转换效果更好的Windows客户端已上线： https://itewqq.cn/mathpixcsharp-opensource-windows-client/
 6 | 
 7 | ## **更新：网站转移到了我自己的国内服务器上，现在每个月的支出已经**远远**超过了我的预期，因此不得已加入了广告试图弥补一些收入。谢谢之前的几位为我打赏的同学！！！从今天(2021.2.21)开始的每一笔打赏我将会维护在这里：[捐助名单](https://github.com/itewqq/MathF/blob/master/donatelist.md)**
 8 | 
 9 | ![使用示例](test1.gif)
10 | 
11 | # 使用方法
12 | ### 用截图工具（QQ 微信等的截图或者Windows自带的截图）截图或将图片复制到剪切板后在本页面按Ctrl+V粘贴即可在文本框内获取latex代码。注意Word的代码复制出来之后再Word里粘贴要用 右键-> 粘贴 -> 仅粘贴文本 的方式
13 | 
14 | ### 地址：   https://mathcode.herokuapp.com/ 建议加入书签。由于是部署在heroku美国上（买不起服务器和域名）所以国内直连会比较卡。
15 | 
16 | # 这是什么
17 | * ### 一个可以把截图中的公式识别出来转换成latex代码的在线工具，部署在heruko上。主要面向中国大陆的学生。
18 | 
19 | # 为什么需要这个
20 | * ## 可能主要是因为我是一个latex菜鸡，所以我经常会遇到以下两种情况：
21 |   ### 1. 看到某个pdf/blog里的公式，需要用到而自己不知道怎么用latex/word打出来
22 |   ### 2. 需要大量的从一份文档里抄公式到另外一份文档中，太累（懒）
23 | 
24 | # 为什么不用mathpix
25 | ### 1. 个人版太贵，面向中国用户的策略是一年300多人民币，对大多数人来说不值得
26 | ### 2. 开发版每个月有1000次免费额度，但是需要信用卡，而在中国大部分学生没有Visa/MasterCard的信用卡(如果你有这样的条件可以看一下这个[C#的mathpix客户端](https://github.com/itewqq/MathpixCsharp))
27 | 
28 | # 为什么没有开源代码
29 | ### 原理其实也是用了mathpix的接口，前后端的代码都过于简单，而且我不是web开发，没有必要给大家分享一坨屎。（逃
30 | 
31 | # 不收费吗
32 | ### 不收，为爱发电。当然为爱发电的后果是，不知道能坚持到什么时候。为了防止恶意请求，加了一些简单的限流措施，可能会影响服务器性能。如果你觉得有帮助到你，可以点击网页上的赞助链接打赏，金额随意。
33 | 


--------------------------------------------------------------------------------
/donatelist.md:
--------------------------------------------------------------------------------
 1 | ## 捐助名单，按时间先后排序
 2 | 
 3 | ### 感谢 \*州 为本项目打赏￥16.80！
 4 | ### 感谢 J\*g 为本项目打赏￥20.00！
 5 | ### 感谢 **弛 为本项目打赏￥10.00！
 6 | ### 感谢 L\*C 为本项目打赏￥10.00！
 7 | ### 感谢 \*～ 为本项目打赏￥1.66！
 8 | ### 感谢 w\*z 为本项目打赏￥2.00！
 9 | ### 感谢 杨\*昊 为本项目打赏￥66.00！
10 | ### 感谢 \*扬 为本项目打赏￥5.00！
11 | ### 感谢 a\*e 为本项目打赏￥25.00！
12 | ### 感谢 \*\*捷 为本项目打赏￥6.66！
13 | ### 感谢 \*民 为本项目打赏￥6.66！
14 | ### 感谢 \*翔 为本项目打赏￥5.00！
15 | ### 感谢 wake up 为本项目打赏￥1.00！
16 | ### 感谢 D\*e 为本项目打赏￥1.00！
17 | ### 感谢 L\*t 为本项目打赏￥6.66！
18 | ### 感谢 \*前 为本项目打赏￥66.66！
19 | ### 感谢 J\*g 为本项目打赏￥20.00！
20 | ### 感谢 李\*K 为本项目打赏￥1.66！
21 | ### 感谢 \*行 为本项目打赏￥1.00！
22 | ### 感谢 P\*s 为本项目打赏￥10.00！
23 | ### 感谢 \*国 为本项目打赏￥16.00！
24 | ### 感谢 \*州 为本项目打赏￥16.88！
25 | ### 感谢 J\*g 为本项目打赏￥20.00！
26 | ### 感谢 \*□ 为本项目打赏￥10.00！
27 | ### 感谢 E\*. 为本项目打赏￥20.00！
28 | ### 感谢 \*户 为本项目打赏￥10.00！
29 | ### 感谢 \*玉 为本项目打赏￥6.66！
30 | ### 感谢 \*玉 为本项目打赏￥0.10！
31 | ### 感谢 \*\*玉 为本项目打赏￥10.10！
32 | ### 感谢 \*玉 为本项目打赏￥1.00！
33 | ### 感谢 \*龙 为本项目打赏￥1.00！
34 | ### 感谢 \*e 为本项目打赏￥10.00！
35 | ### 感谢 \*玉 为本项目打赏￥1.00！
36 | ### 感谢 \*江 为本项目打赏￥10.00！
37 | ### 感谢 \*桥 为本项目打赏￥5.00！
38 | ### 感谢 \*\*明 为本项目打赏￥40.00！
39 | ### 感谢 J\*g 为本项目打赏￥20.00！
40 | ### 感谢 \*国 为本项目打赏￥1.00！
41 | ### 感谢 \*雅 为本项目打赏￥5.00！
42 | ### 感谢 \*宜 为本项目打赏￥2.00！
43 | ### 感谢 \*V 为本项目打赏￥5.00！
44 | ### 感谢 \*巨 为本项目打赏￥10.00！
45 | ### 感谢 \*虎 为本项目打赏￥5.00！
46 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!Doctype html>
  2 | <html>
  3 |     <meta charset="utf-8">
  4 |     <header>
  5 |          <script src="https://www.recaptcha.net/recaptcha/api.js?render=6Le-e0kaAAAAAGDaIzEJgHyal0TfKTY2iYuCcXaP"></script>
  6 |         <!-- Global site tag (gtag.js) - Google Analytics -->
  7 |         <script async src="https://www.googletagmanager.com/gtag/js?id=G-8FJMQVWMM6"></script>
  8 |         <script>
  9 |           window.dataLayer = window.dataLayer || [];
 10 |           function gtag(){dataLayer.push(arguments);}
 11 |           gtag('js', new Date());
 12 | 
 13 |           gtag('config', 'G-8FJMQVWMM6');
 14 |         </script>
 15 |     </header>
 16 |     <body>
 17 |         <script type="text/javascript">
 18 |             const CAPTCHA_CLIENT_SECRET = "6Le-e0kaAAAAAGDaIzEJgHyal0TfKTY2iYuCcXaP";
 19 |             function onSubmit(token) {
 20 |               document.getElementById("demo-form").submit();
 21 |             }
 22 |             function copy_to_clipboard(id) {
 23 |                 document.getElementById(id).select();
 24 |                 document.execCommand('copy');
 25 |             }
 26 |             function getBase64(file) {
 27 |               return new Promise((resolve, reject) => {
 28 |                 const reader = new FileReader();
 29 |                 reader.readAsDataURL(file);
 30 |                 reader.onload = () => resolve(reader.result);
 31 |                 reader.onerror = error => reject(error);
 32 |               });
 33 |             }
 34 |             document.addEventListener('paste', function (event) {
 35 |                 let items = event.clipboardData && event.clipboardData.items;
 36 |                 let file = null;
 37 |                 let ok = false;
 38 |                 if (items && items.length) {
 39 |                     for (var i = 0; i < items.length; i++) {
 40 |                         if (items[i].type.indexOf('image') !== -1) {
 41 |                             file = items[i].getAsFile();
 42 |                             ok = true;
 43 |                             break;
 44 |                         }
 45 |                     }
 46 |                 }
 47 |                 console.log(ok);
 48 |                 if(!ok){
 49 |                     return;
 50 |                 }
 51 |                 var img_base64=getBase64(file);
 52 |                 grecaptcha.execute(CAPTCHA_CLIENT_SECRET, {action: 'getcode'}).then(function(token) {
 53 | 					return fetch('/validate?token=' + token, {
 54 | 						method: 'GET'
 55 | 					});
 56 | 				})
 57 |                 .then(response => {
 58 |                     if (response.ok){
 59 |                         return response.json();
 60 |                     }
 61 |                 })
 62 |                 .then(function (data) {
 63 |                     console.log(data);
 64 |                     if(data['code'] == 0){
 65 |                         let reader = new FileReader()
 66 |                         reader.onload = function(event) {
 67 |                             var img_area=document.getElementById("img_area");
 68 |                             img_area.innerHTML = '<img style="max-height: 250px;max-width: 500px" src="'+this.result+'" alt=""/>';
 69 | 
 70 |                         }
 71 |                         reader.readAsDataURL(file);
 72 |                         if(document.getElementById("rad_pay").checked){
 73 |                             try {
 74 |                                 var xhr = new XMLHttpRequest();
 75 |                                 xhr.onload = function () {
 76 |                                     var json = JSON.parse(xhr.responseText);
 77 |                                     if (json['code'] == 200) {
 78 |                                         let text_areaI = document.getElementById("latexCodeInline");
 79 |                                         let text_areaD = document.getElementById("latexCodeDisplay");
 80 |                                         let text_areaE = document.getElementById("latexCodeEquation")
 81 |                                         let text_areaW = document.getElementById("wordCode");
 82 |                                         let latex_code = json['text'].replace("\\)", "$").replace("\\(","$").replace("\\]", "$$").replace("\\[","$$");
 83 |                                         text_areaI.innerText = latex_code;
 84 |                                         text_areaD.innerText = '$' + latex_code + '$';
 85 |                                         text_areaE.innerText = '\\begin{equation}\n' + latex_code.substr(1,latex_code.length-2)+ '\\end{equation}\n';
 86 |                                         if(json['data'].length !== 0) {
 87 |                                             text_areaW.innerText = json['data'][0]['value'];
 88 |                                         }else{
 89 |                                             text_areaW.innerText = 'MathML功能目前只能识别单个公式，请准确地截取图片';
 90 |                                         }
 91 |                                         document.getElementById("number_uses").innerText = "Uses: "+json['uses'].toString();
 92 |                                     } else {
 93 |                                         alert(json['message'])
 94 |                                         var img_area = document.getElementById("img_area");
 95 |                                         img_area.innerHTML = '<img style="max-height: 250px;max-width: 500px" src="' + this.result + '" alt=""/>';
 96 |                                     }
 97 |                                 };
 98 |                                 xhr.open('POST', 'https://service-hzv8746l-1255970853.sh.apigw.tencentcs.com/release/mathcode', true);
 99 |                                 xhr.setRequestHeader('Content-Type', 'application/json');
100 |                                 xhr.setRequestHeader('app_id', document.getElementById("app_id").value);
101 |                                 xhr.setRequestHeader('app_key', document.getElementById("app_key").value);
102 |                                 img_base64.then(data => {
103 |                                     var params = {
104 |                                         'src': data
105 |                                     };
106 |                                     xhr.send(JSON.stringify(params));
107 |                                 });
108 |                             }catch (e) {
109 |                                 alert(e)
110 |                             }
111 |                         }else {
112 |                             let formData = new FormData();
113 |                             formData.append('upFile', file, file.name)
114 |                             formData.append('token', data['token'])
115 |                             formData.append('tstamp', data['tstamp'])
116 |                             console.log(formData)
117 |                             var xhr = new XMLHttpRequest();
118 |                             xhr.onload = function () {
119 |                                 if (this.status == 429) {
120 |                                     alert("今日免费接口限额已用完，明天再来吧┑(￣Д ￣)┍\n或者移步付费接口φ(゜▽゜*)♪");
121 |                                 } else {
122 |                                     var json = JSON.parse(xhr.responseText);
123 |                                     if (json['code'] === 0) {
124 |                                         let text_areaI = document.getElementById("latexCodeInline");
125 |                                         let text_areaD = document.getElementById("latexCodeDisplay");
126 |                                         let text_areaE = document.getElementById("latexCodeEquation")
127 |                                         let text_areaW = document.getElementById("wordCode");
128 |                                         text_areaI.innerText = '$' + json['latex'] + '$';
129 |                                         text_areaD.innerText = '$$' + json['latex'] + '$$';
130 |                                         text_areaE.innerText = '\\begin{equation}\n' + json['latex'] + '\\end{equation}\n';
131 |                                         text_areaW.innerText = json['word'];
132 |                                     } else {
133 |                                         alert(json['message'])
134 |                                         var img_area = document.getElementById("img_area");
135 |                                         img_area.innerHTML = '<img style="max-height: 250px;max-width: 500px" src="' + this.result + '" alt=""/>';
136 |                                     }
137 |                                 }
138 |                             };
139 |                             try {
140 |                                 xhr.open('POST', './upload', true);
141 |                                 xhr.send(formData);
142 |                             }catch (e) {
143 |                                 alert(e)
144 |                             }
145 |                         }
146 | 
147 |                     }else{
148 |                         throw new Error(data['message'])
149 |                     }
150 |                 }).catch(error=>{
151 |                     alert(error)
152 |                 });
153 |             });
154 |         </script>
155 |         <style type="text/css">
156 |             .div1{text-align: center;}
157 |             .div2{display: inline-block;padding-left: 5px;padding-right: 5px;border: 1px solid;margin-left: 5px;margin-right: 5px;}
158 |             .div3{display: inline-block;padding-left: 5px;padding-right: 5px;margin-left: 15%;margin-right: 5%;}
159 |             .button {
160 |                 background-color: #4CAF50;
161 |                 border: none;
162 |                 color: white;
163 |                 padding: 8px 6px;
164 |                 text-align: center;
165 |                 text-decoration: none;
166 |                 display: inline-block;
167 |                 font-size: 16px;
168 |             }
169 |             label{
170 |                 display:inline-block;
171 |                 width: 150px;
172 |             }
173 |             textarea{
174 |                 resize:none;
175 |                 word-wrap:normal;
176 |                 vertical-align: middle;
177 |             }
178 |         </style>
179 |         <div class="div1">
180 |             <div style="font-family: 'Microsoft YaHei UI',serif;font-size:20px;font-style: italic;margin-top: 100px;">
181 |                 <a href="https://itewqq.cn/mathpixcsharp-opensource-windows-client/" target="_blank">Web端新增付费接口，点击查看使用说明（PS：广告位招租/(ㄒoㄒ)/）</a>
182 |             </div>
183 |             <div id="img_area">
184 |                 <img style="max-height: 250px;max-width: 500px" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=315877498,4102939927&fm=26&gp=0.jpg" alt=""/>
185 |             </div>
186 |         </div>
187 |         <div class="div1">
188 |             <input type="radio" name="choose_api" value="0" id="rad_free" checked="checked"> 免费接口
189 |             <input type="radio" name="choose_api" value="1" id="rad_pay"> 第三方付费接口
190 |             <br><br>
191 |         </div>
192 |         <div class="div1">
193 |             <div class="div3">
194 |                 <div id="id_and_key" style="display: none;">
195 |                     请填入您的APP_ID和APP_KEY
196 |                     <input type="text" id="app_id" placeholder="APP_ID">
197 |                     <input type="text" id="app_key" placeholder="APP_KEY">
198 |                     <label for="app_key" id="number_uses">Uses: INF</label>
199 |                     <br><br>
200 |                 </div>
201 |             </div>
202 |         </div>
203 | 
204 |         <div class="div1">
205 |             <div id="div2">
206 |                 <label for="latexCodeInline">Latex Inline</label>
207 |                 <textarea id="latexCodeInline" rows="1" cols="80" readonly></textarea>
208 |                 <button class="button" onclick="copy_to_clipboard('latexCodeInline')">Copy</button>
209 |             </div>
210 |             
211 |             <div id="div2">
212 |                 <label for="latexCodeDisplay">Latex Display</label>
213 |                 <textarea id="latexCodeDisplay" rows="1" cols="80" readonly></textarea>
214 |                 <button class="button" onclick="copy_to_clipboard('latexCodeDisplay')">Copy</button>
215 |             </div>
216 |             
217 |             <div id="div2">
218 |                 <label for="latexCodeEquation">Latex Equation</label>
219 |                 <textarea id="latexCodeEquation" rows="1" cols="80" readonly></textarea>
220 |                 <button class="button" onclick="copy_to_clipboard('latexCodeEquation')">Copy</button>
221 |             </div>
222 |             
223 |             <div id="div2">
224 |                 <label for="wordCode">Word</label>
225 |                 <textarea id="wordCode" rows="1" cols="80" readonly></textarea>
226 |                 <button class="button" onclick="copy_to_clipboard('wordCode')">Copy</button>
227 |             </div>
228 |             
229 |         </div>
230 |         <div class="div1">
231 |             <h3>使用方法：用截图工具截图或将图片复制到剪切板后在本页面按Ctrl+V粘贴即可</h3>
232 |             <h4>*温馨提示：Windows 10 按 Win+Shift+S 即可截图到剪贴板</h4>
233 |             <h4>*部署了简单的反滥用措施，如果持续遇到错误请点击问题反馈提issue</h4>
234 |             <h4>服务器性能有限，没有反应的话可以等几秒钟，或者重新粘贴几次</h4>
235 |             <h4 >如果你觉得有帮到你，可以<a href="hello" target="_blank">赞赏支持</a></h4>
236 |             <div id="tips">
237 |                 <p >在我的博客<a href="https://itewqq.cn/image-to-latex-convert-app/" target="_blank">了解关于本项目</a> </p>
238 |                 <p ><a href="https://github.com/itewqq/MathF/issues" target="_blank">问题反馈</a></p>
239 |                 <p ><a href="https://t.me/FuckerQu" target="_blank">联系我</a></p>
240 |             </div>
241 |         </div>
242 |         <script type="application/javascript">
243 |             document.getElementById("rad_pay").addEventListener('change', function (event) {
244 |                 document.getElementById("id_and_key").style.display="";;
245 |             });
246 |             document.getElementById("rad_free").addEventListener('change', function (event) {
247 |                 document.getElementById("id_and_key").style.display="none";;
248 |             });
249 |         </script>
250 |     </body>
251 | </html>
252 | 


--------------------------------------------------------------------------------
/test1.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itewqq/MathF/4320fdea1184c2598cdd7de5c3c07aad062ae4c7/test1.gif


--------------------------------------------------------------------------------