GLM-OCR入门JavaScript调用OCR API实现浏览器端图片上传识别你是不是也遇到过这样的场景用户在你的网站上上传了一张图片你希望立刻就能提取出里面的文字比如识别一张名片、一份文档或者一张带文字的截图。以前这可能需要复杂的后端处理但现在通过调用现成的OCR API前端也能轻松搞定。今天我们就来聊聊怎么用JavaScript在浏览器里直接调用GLM-OCR的API实现一个“上传图片立刻出字”的酷炫功能。整个过程不需要你懂复杂的服务器部署只要会写点前端代码就行。我会手把手带你从零开始一步步搭建一个能跑起来的Demo。1. 准备工作你需要知道什么在动手敲代码之前我们先花几分钟把几个关键点理清楚。这样后面写起来会更顺畅。首先你得有一个可以访问的GLM-OCR API服务。这通常是一个部署好的后端服务它会提供一个URL地址比如http://your-api-server/ocr。你的前端代码就是通过这个地址把图片数据“送”过去然后“拿回”识别好的文字。如果你还没有这样的服务可能需要先找找相关的部署文档或者使用一些云服务商提供的现成API。其次我们这次用到的技术都是现代浏览器原生支持的不需要引入额外的重量级库HTML5 File API 用来让用户选择文件并读取文件内容。FileReader 这是File API的一部分专门用来读取文件内容比如把图片文件读成一串计算机能理解的编码。Fetch API 这是现在最流行的、用来发送网络请求的工具比老旧的XMLHttpRequest好用多了。Canvas 这个不是必须的但有时候我们会用它来对图片做一些预处理比如调整大小让上传和识别更快。最后想象一下我们要做的页面长什么样一个简单的网页上面有一个按钮用来选择图片一个区域用来显示你选的图片还有一个地方等识别完成后用来展示识别出来的文字。逻辑很简单选图 - 传图 - 等结果 - 显示结果。2. 搭建前端页面从零开始的HTML结构我们先从最简单的HTML骨架开始。创建一个新的HTML文件比如叫index.html。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleGLM-OCR 图片文字识别 Demo/title style body { font-family: sans-serif; max-width: 800px; margin: 2rem auto; padding: 1rem; line-height: 1.6; } .container { display: flex; flex-direction: column; gap: 2rem; } .upload-area { border: 3px dashed #ccc; border-radius: 10px; padding: 3rem; text-align: center; cursor: pointer; transition: border-color 0.3s; } .upload-area:hover, .upload-area.dragover { border-color: #4CAF50; } #fileInput { display: none; /* 隐藏默认的文件输入框 */ } .preview-section, .result-section { border: 1px solid #eee; border-radius: 8px; padding: 1.5rem; } #imagePreview { max-width: 100%; max-height: 400px; margin-top: 1rem; display: none; /* 初始隐藏有图片时再显示 */ } #resultText { white-space: pre-wrap; /* 保留识别结果的换行和空格 */ background-color: #f9f9f9; padding: 1rem; border-radius: 5px; min-height: 100px; border: 1px solid #ddd; } button { background-color: #4CAF50; color: white; padding: 0.75rem 1.5rem; border: none; border-radius: 5px; cursor: pointer; font-size: 1rem; margin-top: 1rem; } button:disabled { background-color: #cccccc; cursor: not-allowed; } .status { margin-top: 1rem; color: #666; font-style: italic; } /style /head body div classcontainer h1 GLM-OCR 图片文字识别/h1 p上传一张包含文字的图片如截图、文档照片体验实时文字识别。/p !-- 上传区域 -- div classupload-area iddropArea h3点击选择或拖拽图片到此区域/h3 p支持 JPG, PNG 等常见格式/p input typefile idfileInput acceptimage/* button idselectBtn选择图片/button /div !-- 图片预览区域 -- div classpreview-section h3图片预览/h3 img idimagePreview alt图片预览 div classstatus idpreviewStatus尚未选择图片/div /div !-- 识别按钮和结果区域 -- div classresult-section h3识别结果/h3 button idrecognizeBtn disabled开始识别/button div classstatus idrecognizeStatus等待上传图片.../div pre idresultText/pre /div /div script srcapp.js/script !-- 我们将把JavaScript代码写在这个文件里 -- /body /html看页面结构很清晰。我们有一个拖拽/点击上传区一个图片预览区一个结果展示区。样式也写得比较简单重点是功能。注意我们把真正的文件选择框input typefile隐藏了然后用一个漂亮的按钮来触发它这样界面更好看。3. 编写JavaScript逻辑让页面动起来接下来是重头戏我们创建一个app.js文件来实现所有的交互逻辑。我会把代码分成几块方便你理解。3.1 获取页面元素和初始化首先拿到我们需要操作的HTML元素。// app.js // 1. 获取DOM元素 const fileInput document.getElementById(fileInput); const selectBtn document.getElementById(selectBtn); const dropArea document.getElementById(dropArea); const imagePreview document.getElementById(imagePreview); const previewStatus document.getElementById(previewStatus); const recognizeBtn document.getElementById(recognizeBtn); const recognizeStatus document.getElementById(recognizeStatus); const resultText document.getElementById(resultText); // 2. 初始化变量 let selectedFile null; // 用来保存用户选择的文件对象 const API_URL YOUR_GLM_OCR_API_ENDPOINT; // 替换成你实际的API地址 // 例如: const API_URL http://localhost:8000/ocr;记得把YOUR_GLM_OCR_API_ENDPOINT换成你真正的API地址。3.2 实现图片选择与预览用户可以通过点击按钮或者直接拖拽来上传图片我们需要处理这两种情况。// 3. 点击按钮触发文件选择 selectBtn.addEventListener(click, () { fileInput.click(); // 模拟点击隐藏的file input }); // 4. 监听文件选择变化 fileInput.addEventListener(change, (event) { const file event.target.files[0]; if (file file.type.startsWith(image/)) { handleImageFile(file); } else { alert(请选择一个有效的图片文件); } }); // 5. 处理拖拽上传 dropArea.addEventListener(dragover, (event) { event.preventDefault(); dropArea.classList.add(dragover); }); dropArea.addEventListener(dragleave, () { dropArea.classList.remove(dragover); }); dropArea.addEventListener(drop, (event) { event.preventDefault(); dropArea.classList.remove(dragover); const file event.dataTransfer.files[0]; if (file file.type.startsWith(image/)) { handleImageFile(file); // 可选 将文件也同步到隐藏的input方便表单提交等场景 const dataTransfer new DataTransfer(); dataTransfer.items.add(file); fileInput.files dataTransfer.files; } else { alert(请拖拽一个有效的图片文件); } }); // 6. 处理图片文件的通用函数 function handleImageFile(file) { selectedFile file; previewStatus.textContent 已选择: ${file.name} (${(file.size / 1024).toFixed(2)} KB); // 使用FileReader读取图片并预览 const reader new FileReader(); reader.onload function(e) { imagePreview.src e.target.result; imagePreview.style.display block; recognizeBtn.disabled false; // 有图片了启用识别按钮 recognizeStatus.textContent 图片已就绪点击“开始识别”按钮; }; reader.readAsDataURL(file); // 将图片读取为Data URLbase64字符串 }这段代码的核心是handleImageFile函数。它用FileReader把图片文件读成一个特殊的字符串Data URL这个字符串可以直接赋值给img标签的src属性这样图片就显示出来了。同时它把文件对象存到selectedFile变量里并激活识别按钮。3.3 调用OCR API并处理结果最激动人心的部分来了把图片发给服务器并取回识别结果。// 7. 点击识别按钮 recognizeBtn.addEventListener(click, async () { if (!selectedFile) { alert(请先选择一张图片); return; } recognizeBtn.disabled true; recognizeStatus.textContent 正在识别中请稍候...; resultText.textContent ; // 准备发送给API的数据 const formData new FormData(); formData.append(image, selectedFile); // ‘image’字段名需要和后端API约定一致 // 有些API可能接受base64这里我们用更通用的FormData方式上传文件 try { const response await fetch(API_URL, { method: POST, body: formData, // 注意使用FormData时浏览器会自动设置Content-Type为 multipart/form-data不要手动设置 }); if (!response.ok) { throw new Error(网络请求失败: ${response.status}); } const data await response.json(); displayResults(data); } catch (error) { console.error(识别过程中出错:, error); recognizeStatus.textContent 识别失败: ${error.message}; resultText.textContent 抱歉识别服务暂时不可用或出现错误。; } finally { recognizeBtn.disabled false; } }); // 8. 解析并展示识别结果 function displayResults(apiData) { // 这里需要根据你的GLM-OCR API返回的实际数据结构来调整 // 假设API返回的JSON结构类似 { “code”: 0, “msg”: “success”, “data”: { “text”: “识别出的文字...” } } // 或者更复杂的结构包含文字块位置信息等。 recognizeStatus.textContent 识别完成; if (apiData.code 0 || apiData.success) { // 根据你的API定义判断成功 const extractedText apiData.data?.text || apiData.text || 未找到文本字段; resultText.textContent extractedText; // 如果你的API返回了更结构化的数据如带坐标的文本块可以在这里进行更丰富的渲染 // 例如 apiData.data.blocks?.forEach(block { ... }); } else { resultText.textContent 识别成功但未返回文本。API消息: ${apiData.msg}; } }这里有几个关键点FormData 我们用FormData对象来包装要上传的文件。这是上传二进制文件如图片的标准方式非常方便。Fetch API 我们用fetch发起一个POST请求把FormData作为请求体发出去。await关键字让代码看起来是同步的但实际上是非阻塞的用户体验更好。错误处理 用try...catch包裹网络请求和数据处理这样即使API出错或者网络不好页面也不会崩溃而是给用户一个友好的提示。结果解析displayResults函数负责处理API返回的JSON数据。这一点非常重要你需要根据你实际使用的GLM-OCR API的返回格式来修改这个函数。我给出了一个常见的结构示例但你的API可能返回result、ocr_text或其他字段名。4. 试试看并处理一些常见问题现在把你的index.html和app.js放在同一个文件夹下用浏览器打开index.html。选一张带文字的图片点击“开始识别”。如果一切顺利你应该能看到图片里的文字被提取出来显示在下方。当然第一次尝试很可能不会那么顺利。下面是一些你可能会遇到的问题和解决办法问题点击识别没反应控制台报错Failed to fetch或跨域错误CORS。原因 这是最常见的问题。你的前端页面比如用file://打开或运行在localhost:8080试图访问另一个地址的API比如localhost:8000浏览器出于安全考虑会阻止。解决最佳实践 将前端页面和后端API部署在同一个域名下或同一台机器的不同端口但需要配置CORS。开发调试 为你的后端API服务启用CORS。如果你用的是Python Flask可以加flask-cors如果是Node.js Express可以用cors中间件。简单允许所有来源仅用于开发# Flask示例 from flask_cors import CORS CORS(app, resources{r/api/*: {origins: *}})// Express示例 const cors require(cors); app.use(cors());临时测试 启动一个本地HTTP服务器来打开你的HTML文件而不是直接双击。在终端进入项目文件夹运行python -m http.serverPython3或npx serve .然后在浏览器访问http://localhost:8000。问题API返回了数据但displayResults函数报错或者结果显示不出来。原因 API返回的数据结构和你代码里预期的不一样。解决 在fetch请求成功后先用console.log(‘API返回数据:’, data)把完整的数据打印到浏览器控制台看看。然后根据实际的结构调整displayResults函数中访问数据的路径比如apiData.result.text还是apiData.ocr_result。问题上传大图片时识别很慢或者页面卡顿。原因 图片太大上传和服务器处理都耗时。解决 可以在前端用Canvas对图片进行压缩。在handleImageFile函数里读取文件后不直接预览而是先画到Canvas上调整尺寸再转换成Blob或Data URL。这里给一个简单的压缩思路function compressImage(file, maxWidth 1024, quality 0.8) { return new Promise((resolve) { const reader new FileReader(); reader.onload function(e) { const img new Image(); img.onload function() { const canvas document.createElement(canvas); let width img.width; let height img.height; if (width maxWidth) { height (height * maxWidth) / width; width maxWidth; } canvas.width width; canvas.height height; const ctx canvas.getContext(2d); ctx.drawImage(img, 0, 0, width, height); canvas.toBlob(resolve, image/jpeg, quality); // 输出压缩后的Blob }; img.src e.target.result; }; reader.readAsDataURL(file); }); }然后在调用API前用这个压缩后的Blob替换原来的selectedFile。5. 回顾与下一步好了一个基本的浏览器端OCR识别应用就完成了。我们从头到尾过了一遍搭建页面、处理图片选择、用Fetch API上传、解析结果并展示。整个过程其实并不复杂核心就是理解如何在前端处理文件以及如何与后端API进行通信。用下来感觉对于简单的图片文字提取需求这个方案已经足够用了。代码结构清晰也容易根据自己的需求进行扩展。比如你可以增加一个下拉框让用户选择识别语言或者把识别结果一键复制到剪贴板。如果你想更进一步可以考虑这些方向用户体验 增加上传进度条Fetch API本身不支持但可以用axios库或者监听xhr.upload.onprogress事件。批量处理 修改fileInput的multiple属性支持一次上传多张图片然后排队识别。结果高亮 如果API返回了文字在图片中的位置坐标bounding box你可以用Canvas在预览图上把这些区域框选出来实现交互式的高亮显示。错误重试与队列 对于可能失败的操作加入自动重试机制对于批量任务实现一个简单的请求队列。最关键的一步是把代码里的API地址换成你自己的然后动手跑起来。前端技术就是这样看着代码不如实际运行一下感受深。遇到问题别怕多看看浏览器的控制台按F12那里的错误信息通常是解决问题的钥匙。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。