在本教程中，我們將學習如何使用 JavaScript 創建一個上傳圖片的功能，并將所選圖片轉換為 LaTeX 公式。我們將使用 FileReader 對象來讀取圖片并將其轉換為 Base64 格式，然后利用 img2latex API 將其轉換為 LaTeX 公式。
1. HTML 結構
首先，讓我們創建一個簡單的 HTML 結構，包括一個按鈕來觸發上傳圖片的操作：
<button id="uploadBtn">上傳圖片</button>
2. JavaScript 代碼
接下來，我們將使用 JavaScript 創建一個 input 元素并監聽文件選擇事件，實現圖片上傳并轉換的功能：
// 創建一個 input 元素用于上傳圖片
const inputElement = document.createElement("input");
inputElement.type = "file";
inputElement.accept = "image/*";// 監聽文件選擇事件
inputElement.addEventListener("change", (event) => {const file = event.target.files[0];if (file) {const reader = new FileReader();// 讀取圖片并轉換為Base64reader.onload = async (e) => {// 在讀取過程中添加加載動畫const loading = ElLoading.service({lock: true,text: '轉換中...',background: 'rgba(255, 255, 255, 0.7)',});const base64Image = e.target.result.split(",")[1];// 調用 API接口將圖片轉換為 LaTeX 公式 這個要換成你們自己的服務了await img2latex({ file: base64Image }).then(res => {loading.close(); // 關閉加載動畫// 將轉換得到的 LaTeX 公式插入到編輯器中tinymce.activeEditor.insertContent(`<span class="math-tex">\\(${res.data.latex}\\)</span>`);});};reader.readAsDataURL(file);}
});// 觸發點擊事件，打開文件選擇對話框
document.getElementById('uploadBtn').addEventListener('click', () => {inputElement.click();
});
3. 效果演示
通過以上代碼，我們實現了一個簡單的圖片上傳并轉換為 LaTeX 公式的功能。當用戶點擊 “上傳圖片” 按鈕時，將會彈出文件選擇對話框，用戶可以選擇圖片文件進行上傳，系統會自動將其轉換為 LaTeX 公式并插入到編輯器中。
4. 總結
通過本教程，我們學習了如何利用 JavaScript 實現圖片上傳并轉換為 LaTeX 公式的功能，同時也介紹了一些相關的技術點，希望對大家有所幫助。
