电子印章插件:内建生成圆形公章 / 椭圆章(发票专用章样式),或上传透明底印章图片;支持点击落章与骑缝章(整章按页切分、每页右缘一片),补齐电子合同场景中企业公章的盖章能力(与 signature 的个人手写签名互补)。

特性

• 内建印章生成:圆形公章(环形单位名 + 五角星 + 横排章名 + 防伪码)、椭圆章(上弧单位名 + 中部章名 + 下弧税号),颜色 / 尺寸 / 字体可配,零依赖纯 SVG 生成
• 上传印章:透明底 PNG / WebP / SVG 图片,自动等比缩放
• 普通盖章:确认后进入落章模式,文档上跟随半透明预览,点击任意位置落章(章中心对准点击点),可连续多盖,Esc 或右键结束
• 骑缝章:整枚印章按页均分为 N 片,每页右缘放置对应切片,页码范围可配;内容增删导致页数变化后再次调用即可刷新
• 印章以浮动图片元素(imgDisplay: float-top + imgFloatPosition)插入,随文档 getValue 保存、参与打印与 getImage 导出;元素 extension 携带 sealData 元数据(place / paging)便于业务侧识别

安装

npm i @hufe921/canvas-editor-plugin-seal --save

使用

import Editor from '@hufe921/canvas-editor'
import sealPlugin from '@hufe921/canvas-editor-plugin-seal'

const editor = new Editor(container, {
  main: [
    {
      value: 'contract content'
    }
  ]
})
editor.use(sealPlugin)

// 打开盖章面板(内建生成 / 上传 + 普通盖章 / 骑缝章)
editor.command.executeSeal()

编程式落章

// 在第 1 页 (x, y) 页面坐标(逻辑 px,原点为页左上角)放置印章
editor.command.executeSealPlace({
  value: sealDataURL,
  width: 120,
  height: 120,
  pageNo: 1,
  x: 560,
  y: 800
})

// 插入(或刷新)骑缝章:整章 width 按页均分,每页右缘一片
const result = editor.command.executeSealPaging({
  value: sealDataURL,
  width: 160,
  height: 160,
  naturalWidth: 160,
  fromPageNo: 1,
  toPageNo: 10,
  offsetX: 10,
  y: undefined
})
// => { count: 10, fromPageNo: 1, toPageNo: 10 }

生成印章图片(不插入文档)

import { buildSealImage, SealType } from '@hufe921/canvas-editor-plugin-seal'

const { dataURL, width, height } = buildSealImage({
  type: SealType.ROUND,
  unitName: '华飞科技有限公司',
  caption: '合同专用章',
  code: '91110108MA01A2B3C4',
  starred: true,
  color: '#cf2b1d',
  size: 120
})

插件选项

editor.use(sealPlugin, {
  locale: 'zhCN',                             // 'zhCN' | 'en'
  lang: { title: '盖章' },                    // 覆盖内置文案
  defaultBuild: {                             // 面板初始生成参数
    type: SealType.ROUND,
    unitName: '华飞科技有限公司',
    caption: '合同专用章'
  },
  onPlaced: result => {                       // 普通盖章每次落章回调
    console.log(result.pageNo, result.x, result.y)
  },
  onPagingPlaced: result => {                 // 骑缝章插入回调
    console.log(result.count)
  }
})

说明与限制

• 印章基于浮动图片元素实现,要求 @hufe921/canvas-editor >= 1.0.0
• 落章 / 插入骑缝章需在可编辑状态(readonly 模式下编辑器不接受插入)
• 骑缝章仅适用分页模式(连续页模式只有一页画布)
• 上传印章参与骑缝切分时,切片按源图像素坐标(imgCrop)计算,请传入 naturalWidth(插件内部上传流程已自动处理)
• 印章可随文档内容被删除(浮动图片元素);业务如需"盖章后锁定",可在盖章后切换 readonly 模式