◈

Annotation Overlay

同一核心 · 三框架组件

当前预览 使用文档

网页截图标注组件
一次编码，三端复用

对任意 DOM 元素截图并铺到画布上，直接在页面里圈画、写批注，一键导出带标注的 PNG。 引擎与样式在构建时内联进每个框架包，Vue 3 / React 18 / Angular 21 三端共用同一套能力与样式，只有组件外壳不同 —— 装一个包即可使用，无需额外依赖。

Vue 3 React 18 Angular 21 6 种标注工具 撤销 / 重做 高 DPI 清晰 TypeScript
GitHub npm

它能做什么

截图即画布

用 snapdom 把目标元素截成图，铺在 Fabric 画布下层，标注直接画在真实页面内容上。

六种标注工具

矩形、椭圆、箭头、折线、画笔、文字；可改颜色、线宽、字号，文字支持二次编辑。

撤销 / 重做

绘制、拖拽缩放、样式提交都会生成撤销点，历史基于 Fabric 对象快照实现。

高分屏清晰

按 devicePixelRatio 渲染位图，导出图与屏幕一致，不会出现“放大后发虚”。

安装与最小用法

npm i @laoliangfe/annotation-overlay-vue

<script setup lang="ts">
import { ref } from 'vue';
import AnnotationOverlay from '@laoliangfe/annotation-overlay-vue';
import '@laoliangfe/annotation-overlay-vue/style.css';

const card = ref<HTMLElement>();
const overlay = ref<InstanceType<typeof AnnotationOverlay>>();

const open = () => overlay.value?.open(card.value!);
</script>

<template>
  <div ref="card">要标注的内容</div>
  <button @click="open">添加标注</button>

  <AnnotationOverlay
    ref="overlay"
    @confirm="(p) => p && console.log(p.blob)"
  />
</template>
npm i @laoliangfe/annotation-overlay-react

import { useRef } from 'react';
import {
  AnnotationOverlay,
  type AnnotationOverlayRef,
} from '@laoliangfe/annotation-overlay-react';
import '@laoliangfe/annotation-overlay-react/style.css';

const card = useRef<HTMLDivElement>(null);
const overlay = useRef<AnnotationOverlayRef>(null);

<div ref={card}>要标注的内容</div>
<button onClick={() => overlay.current?.open(card.current!)}>
  添加标注
</button>

<AnnotationOverlay
  ref={overlay}
  onConfirm={(p) => p && console.log(p.blob)}
/>
npm i @laoliangfe/annotation-overlay-angular

// 1. angular.json → build.options.styles 里加一行：
"node_modules/@laoliangfe/annotation-overlay-angular/style.css"

// 2. 组件 imports 中加入 AnnotationOverlayComponent，模板：
<div #card>要标注的内容</div>
<button (click)="overlay.open(card)">添加标注</button>

<annotation-overlay
  #overlay
  (confirm)="onConfirm($event)"
/>
三端都必须显式引入 style.css：包构建会把 CSS 抽成独立文件并从 JS 移除， 只引组件会出现「组件在、样式全丢」。

API 速查

能力Vue 3React 18Angular 21
打开并截取 ref.open(el) ref.current.open(el) overlay.open(el)
关闭并丢弃 ref.close() ref.current.close() overlay.close()
确认回调 @confirm onConfirm (confirm)
取消回调 @cancel onCancel (cancel)
截图前 / 后 @beforeCapture / @afterCapture onBeforeCapture / onAfterCapture (beforeCapture) / (afterCapture)
回调数据 { base64: string; blob: Blob }，截图或导出失败时为 null

包结构

包说明
@laoliangfe/annotation-overlay-vue Vue 3 组件
@laoliangfe/annotation-overlay-react React 18 组件
@laoliangfe/annotation-overlay-angular Angular 21 组件（standalone + signals，兼容 zoneless）
三个包都是「装一个即可用」：引擎（core）与样式（ui）是仓库内部包，构建时已内联进各自产物， 不需要也不应该单独安装。 旧包 @laoliangfe/annotation-overlay（1.x 单文件 Vue 组件）已冻结在 1.1.7， 源码见 tag v1.1.7；新项目请用上表中的 -vue 包， API 与旧包完全一致，迁移只需改 import 路径并补一行 style.css。

在线演示

演示页里的“添加标注”按钮会打开覆盖层：先选工具再画，右上角可撤销 / 重做，确认后标注图显示在下方预览区。

Vue 3 演示