GLM-OCR模型VS Code插件开发：在编辑器内实现截图即识别

GLM-OCR模型VS Code插件开发在编辑器内实现截图即识别作为一名开发者你有没有过这样的烦恼正在写代码注释或者技术文档需要参考一份PDF或者网页上的文字只能笨拙地在屏幕和编辑器之间来回切换要么手动敲打要么复制粘贴效率低下还容易出错。如果能在编辑器里直接截图然后自动把图片里的文字“抠”出来直接插入到光标位置那该多省事。今天我们就来把这个想法变成现实。我将手把手带你开发一个VS Code插件它结合了GLM-OCR模型的强大识别能力让你在VS Code里实现“所见即所得”的文字提取。你只需要一个快捷键框选屏幕任意区域文字就会自动出现在你的文档里。整个过程你连浏览器都不用打开。1. 这个插件能解决什么问题想象几个你每天都会遇到的场景写技术博客你需要引用一段开源项目的文档说明但文档是图片格式。传统做法是打开图片 - 可能用某个在线OCR网站 - 复制结果 - 切回VS Code粘贴。步骤繁琐还涉及隐私问题。代码审查同事发来一张错误日志的截图。你需要把里面的错误信息提取出来去代码库或文档里搜索。手动输入既慢又可能打错。学习与研究阅读电子书或论文时遇到重要的图表或公式想把旁边的解释文字快速摘录到你的笔记中。这个插件的核心价值就是将外部信息图片中的文字无缝、快速、准确地引入你的创作环境VS Code。它消灭了工具间的切换成本让信息流动变得极其顺畅。对于文字工作者、学生、程序员来说这就是一个效率倍增器。2. 开发前的准备工作在开始敲代码之前我们需要把“舞台”搭好。主要分为两部分VS Code插件开发环境和GLM-OCR服务。2.1 配置VS Code插件开发环境首先确保你安装了最新版的VS Code。然后我们需要官方脚手架工具来快速生成项目骨架。打开终端执行以下命令# 安装Yeoman和VS Code扩展生成器 npm install -g yo generator-code # 使用生成器创建新项目 yo code运行yo code后你会看到一个交互式命令行界面。按照下面的示例进行选择? What type of extension do you want to create? New Extension (TypeScript) ? Whats the name of your extension? glm-ocr-helper ? Whats the identifier of your extension? glm-ocr-helper ? Whats the description of your extension? Screenshot and recognize text using GLM-OCR within VS Code. ? Initialize a git repository? Yes ? Which package manager to use? npm选择TypeScript是因为它能提供更好的类型安全和开发体验。项目创建完成后用VS Code打开这个新生成的文件夹。2.2 理解GLM-OCR服务我们的插件需要一个“大脑”来识别图片中的文字这里我们选用GLM-OCR模型。通常这类服务会提供一个API端点URL。你需要根据GLM-OCR官方文档获取以下关键信息API请求地址例如https://api.example.com/v1/ocr。认证方式通常是API Key放在请求头如Authorization: Bearer your-api-key或请求参数中。请求格式大概率是multipart/form-data格式上传一个图片文件。响应格式成功时会返回一个JSON里面包含识别出的文本字段。重要提示在实际开发中请务必将你的API Key等敏感信息存储在环境变量或VS Code的密钥管理器中绝对不要硬编码在源码里。为了教程演示我们会在代码中用一个变量代替但你一定要记得替换成安全的方式。3. 插件核心功能实现我们的插件主要干三件事截图、上传识别、插入文本。让我们一步步实现。3.1 创建并注册截图命令插件的所有功能都通过命令Command来触发。我们首先在package.json中声明这个命令。打开package.json找到contributes部分添加commands和keybindings{ contributes: { commands: [ { command: glm-ocr-helper.screenshotOCR, title: GLM-OCR: Screenshot and Recognize Text } ], keybindings: [ { command: glm-ocr-helper.screenshotOCR, key: ctrlshifto, mac: cmdshifto, when: editorTextFocus } ] } }这里我们定义了一个命令glm-ocr-helper.screenshotOCR并为它绑定了快捷键CtrlShiftO在Mac上是CmdShiftO。when条件确保只在编辑器获得焦点时生效。接下来在src/extension.ts中激活并实现这个命令。替换掉activate函数的内容import * as vscode from vscode; import * as fs from fs; import * as path from path; import * as os from os; import { exec } from child_process; import * as FormData from form-data; import axios from axios; // 你的GLM-OCR服务配置请勿提交至代码仓库 const GLM_OCR_API_URL YOUR_GLM_OCR_API_ENDPOINT; // 替换为实际URL const GLM_OCR_API_KEY YOUR_API_KEY_HERE; // 替换为实际Key export function activate(context: vscode.ExtensionContext) { // 注册命令 let disposable vscode.commands.registerCommand(glm-ocr-helper.screenshotOCR, async () { // 1. 获取截图 const screenshotPath await takeScreenshot(); if (!screenshotPath) { vscode.window.showErrorMessage(截图失败或已取消。); return; } // 2. 调用OCR服务 vscode.window.withProgress({ location: vscode.ProgressLocation.Notification, title: GLM-OCR正在识别文字..., cancellable: false }, async (progress) { try { const recognizedText await callGLMOCR(screenshotPath); // 3. 插入文本到编辑器 await insertTextToEditor(recognizedText); vscode.window.showInformationMessage(文字已识别并插入); } catch (error: any) { vscode.window.showErrorMessage(识别失败: ${error.message}); } finally { // 清理临时截图文件 fs.unlink(screenshotPath, (err) { if (err) console.error(err); }); } }); }); context.subscriptions.push(disposable); }3.2 实现截图功能VS Code扩展API本身不提供截图功能我们需要借助系统工具。这里以macOS使用screencapture和Windows使用PowerShell为例。创建一个takeScreenshot函数async function takeScreenshot(): Promisestring | null { const tempDir os.tmpdir(); const timestamp Date.now(); const screenshotPath path.join(tempDir, vscode-ocr-${timestamp}.png); return new Promise((resolve) { let command: string; if (process.platform darwin) { // macOS // -i 交互模式光标选择区域-s 捕捉屏幕选区 command screencapture -i -s ${screenshotPath}; } else if (process.platform win32) { // Windows // 使用PowerShell和 .NET 的 Graphics 类进行截图 const psScript Add-Type -AssemblyName System.Windows.Forms Add-Type -AssemblyName System.Drawing $bitmap New-Object System.Drawing.Bitmap([System.Windows.Forms.Screen]::PrimaryScreen.Bounds.Width, [System.Windows.Forms.Screen]::PrimaryScreen.Bounds.Height) $graphics [System.Drawing.Graphics]::FromImage($bitmap) $graphics.CopyFromScreen(0, 0, 0, 0, $bitmap.Size) $bitmap.Save(${screenshotPath.replace(/\\/g, \\\\)}, [System.Drawing.Imaging.ImageFormat]::Png) $graphics.Dispose() $bitmap.Dispose() ; command powershell -Command ${psScript.replace(//g, \\)}; } else { // Linux假设使用 gnome-screenshot command gnome-screenshot -a -f ${screenshotPath}; } exec(command, (error) { if (error) { // 用户取消截图在macOS上会返回错误码1 if (error.code 1 process.platform darwin) { resolve(null); } else { console.error(截图命令执行失败:, error); resolve(null); } } else { // 检查文件是否真的被创建 fs.access(screenshotPath, fs.constants.F_OK, (err) { resolve(err ? null : screenshotPath); }); } }); }); }3.3 调用GLM-OCR API识别文字现在我们需要把截好的图片发给GLM-OCR服务。我们将使用axios库来发送HTTP请求。首先安装依赖npm install axios form-data npm install --save-dev types/form-data然后实现callGLMOCR函数async function callGLMOCR(imagePath: string): Promisestring { const formData new FormData(); formData.append(image, fs.createReadStream(imagePath)); // 根据你的API要求可能还需要附加其他参数例如 // formData.append(language, zh); try { const response await axios.post(GLM_OCR_API_URL, formData, { headers: { Authorization: Bearer ${GLM_OCR_API_KEY}, ...formData.getHeaders(), // 这是关键设置multipart/form-data的边界 }, timeout: 30000, // 30秒超时 }); // 假设API返回格式为 { text: 识别出的文字, confidence: 0.95 } if (response.data response.data.text) { return response.data.text.trim(); } else { throw new Error(OCR API返回格式异常未找到文本字段。); } } catch (error: any) { if (error.response) { // 请求已发出服务器返回状态码非2xx throw new Error(API错误: ${error.response.status} - ${JSON.stringify(error.response.data)}); } else if (error.request) { // 请求已发出但无响应 throw new Error(网络错误无法连接到OCR服务。); } else { // 请求配置出错 throw new Error(请求配置错误: ${error.message}); } } }3.4 将识别结果插入编辑器最后一步把识别到的文字放到光标处。这里我们做得智能一点如果当前有选中文本则替换它如果没有则在光标处插入。async function insertTextToEditor(text: string) { const editor vscode.window.activeTextEditor; if (!editor) { vscode.window.showWarningMessage(没有活动的文本编辑器无法插入文字。); return; } const selection editor.selection; const position selection.active; // 使用editBuilder进行编辑操作 editor.edit((editBuilder) { if (!selection.isEmpty) { // 替换选中的文本 editBuilder.replace(selection, text); } else { // 在光标处插入文本 editBuilder.insert(position, text); } }); }4. 运行、调试与打包4.1 调试你的插件在VS Code里直接按F5键。这会启动一个“扩展开发宿主”窗口这是一个全新的VS Code实例里面已经加载了你的插件。在新窗口里打开一个文本文件。按下你设置的快捷键CtrlShiftO。你的鼠标会变成十字线拖动选择屏幕上一个包含文字的区域。稍等片刻识别出的文字就应该出现在你的编辑器里了原来的VS Code窗口则作为调试控制台你可以在这里看到console.log的输出和任何错误信息。4.2 处理常见问题与优化截图工具不可用确保你的系统有对应的截图命令如macOS的screencaptureLinux的gnome-screenshot。对于Windows我们的PowerShell脚本是内置的通常没问题。网络请求失败检查你的API Key和URL是否正确以及网络连接是否正常。可以在callGLMOCR函数里添加更详细的日志。识别精度问题GLM-OCR模型对清晰、规整的印刷体文字识别效果很好。如果图片模糊、倾斜或背景复杂效果可能会打折扣。你可以考虑在插件里加入一个简单的图片预处理提示或者允许用户手动修正识别结果。安全性再次强调API Key必须妥善保管。可以使用VS Code的SecretStorageAPI来安全地存储和读取密钥。// 使用VS Code的密钥存储示例 const secretStorage context.secrets; await secretStorage.store(glmOcrApiKey, GLM_OCR_API_KEY); const keyFromStorage await secretStorage.get(glmOcrApiKey);4.3 打包与发布当你对插件满意后可以打包并发布到VS Code市场。安装打包工具npm install -g vscode/vsce打包vsce package。这会生成一个.vsix文件。发布你需要创建一个Azure DevOps账户并获取个人访问令牌PAT。然后使用vsce publish命令发布。发布后全世界的开发者都可以在VS Code的扩展商店里搜索并安装你的插件了。5. 总结走完这一趟我们不仅做出了一个实用的工具更完整地体验了一个VS Code插件的诞生过程从定义需求、配置环境、实现核心功能命令注册、系统调用、网络请求、编辑器交互到最后的调试和优化。这个GLM-OCR插件的核心思路其实是一种“胶水”思维——将优秀的AI能力GLM-OCR与高效的创作环境VS Code粘合在一起创造出112的体验。你可以基于这个框架继续扩展更多功能比如添加一个侧边栏来显示识别历史、支持多种OCR服务商、或者加入对表格识别的结构化输出等。开发工具的本质是为了让自己和他人工作得更舒服。希望这个教程能给你带来启发动手去创造那些能点亮你工作流的小工具吧。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。