求助开发VS Code图片悬停扩展：获取像素坐标与像素值

核心思路 #

核心是监听VS Code的鼠标悬停事件，识别目标是否为图片元素，获取图片像素数据后计算鼠标对应坐标的像素值，最后通过Hover Provider展示结果。

针对不同图片场景的实现步骤 #

1. 普通上传图片（如Markdown中的图片） #

• 注册HoverProvider，关联markdown等包含图片的文档类型。
• 在provideHover方法中，通过鼠标位置解析文档中的图片路径/URL。
• 用图像处理库（如sharp）加载图片，提取原始像素数据。
• 计算鼠标相对于图片的渲染坐标：需结合编辑器中图片的实际渲染位置和缩放比例，避免用原始尺寸直接计算导致偏差。
• 根据坐标读取对应像素的RGBA值，组装成悬停提示返回。

2. Jupyter Notebook中的numpy变量图片 #

• 注册Notebook专属的HoverProvider，指定jupyter-notebook文档类型。
• 遍历单元格输出，识别包含图片的富文本输出（如image/png格式的数据）。
• 直接从numpy变量对应的输出数据中提取像素数组（比从渲染图片读取更准确，避免压缩失真），或通过sharp解析PNG数据获取像素。
• 计算鼠标相对图片的渲染坐标，结合像素数组读取对应位置的像素值，生成悬停提示。

关键代码片段 #

注册Hover Provider #

import * as vscode from 'vscode';
const sharp = require('sharp');

export function activate(context: vscode.ExtensionContext) {
    // 普通Markdown图片悬停
    const markdownHover = vscode.languages.registerHoverProvider('markdown', {
        async provideHover(doc: vscode.TextDocument, pos: vscode.Position) {
            // 匹配Markdown图片语法，提取路径
            const imgMatch = doc.getText(doc.getWordRangeAtPosition(pos, /!\[.*?\]\((.*?)\)/))?.match(/!\[.*?\]\((.*?)\)/);
            if (!imgMatch) return;

            const imgPath = imgMatch[1];
            try {
                const img = sharp(imgPath);
                const meta = await img.metadata();
                const { data, info } = await img.raw().toBuffer({ resolveWithObject: true });

                // 这里需替换为实际计算的鼠标相对图片坐标（示例用模拟值）
                const [x, y] = [80, 80];
                if (x < 0 || x >= meta.width || y < 0 || y >= meta.height) return;

                const pixelIndex = (y * meta.width + x) * info.channels;
                const pixelValue = {
                    r: data[pixelIndex],
                    g: data[pixelIndex + 1],
                    b: data[pixelIndex + 2],
                    a: info.channels === 4 ? data[pixelIndex + 3] : 255
                };

                return new vscode.Hover(`坐标: (${x}, ${y})\n像素值: R=${pixelValue.r}, G=${pixelValue.g}, B=${pixelValue.b}, A=${pixelValue.a}`);
            } catch (err) {
                console.error('加载图片失败:', err);
                return;
            }
        }
    });

    // Jupyter Notebook图片悬停
    const notebookHover = vscode.notebooks.registerNotebookHoverProvider({ viewType: 'jupyter-notebook' }, {
        async provideHover(_, cell: vscode.NotebookCell) {
            for (const output of cell.outputs) {
                if (output.outputKind === vscode.CellOutputKind.Rich && output.data['image/png']) {
                    const pngBuffer = Buffer.from(output.data['image/png'], 'base64');
                    const img = sharp(pngBuffer);
                    const meta = await img.metadata();
                    const { data, info } = await img.raw().toBuffer({ resolveWithObject: true });

                    // 需替换为实际计算的鼠标相对图片坐标
                    const [x, y] = [50, 50];
                    if (x < 0 || x >= meta.width || y < 0 || y >= meta.height) continue;

                    const pixelIndex = (y * meta.width + x) * info.channels;
                    const pixelValue = {
                        r: data[pixelIndex],
                        g: data[pixelIndex + 1],
                        b: data[pixelIndex + 2],
                        a: info.channels === 4 ? data[pixelIndex + 3] : 255
                    };

                    return new vscode.Hover(`坐标: (${x}, ${y})\n像素值: R=${pixelValue.r}, G=${pixelValue.g}, B=${pixelValue.b}, A=${pixelValue.a}`);
                }
            }
            return;
        }
    });

    context.subscriptions.push(markdownHover, notebookHover);
}

重点注意事项 #

• 坐标计算：这是核心难点，需通过VS Code的Webview或DOM API获取图片在编辑器中的实际渲染位置和缩放比例，不能直接用图片原始尺寸计算。
• 性能优化：大图片可缓存已处理的像素数据，避免每次悬停重复加载解析。
• Jupyter依赖：需确保扩展激活时Jupyter扩展已加载，可通过vscode.extensions.getExtension检查并等待激活。

调试与测试 #

• 用VS Code扩展调试功能，断点查看图片路径、像素数据、坐标变量的实际值。
• 测试不同类型图片：本地图、网络图、Jupyter生成的灰度/彩色图。
• 验证悬停提示的坐标和像素值是否与图片实际内容匹配。

内容的提问来源于stack exchange，提问作者chipotle_bowl