License 授权书

avue-license 在 Canvas 上按图层合成文字与图片，适合授权凭证、证明或海报导出。修改 option 会重新生成画布。

效果预览可直接操作下方示例

示例用本地 Logo 与文字生成凭证，支持下载 PNG 和获取文件信息。生成或导出失败会展示错误，不依赖远程背景图。

正在加载示例…

<template>
  <el-space wrap>
    <el-button type="primary" :disabled="!ready" @click="download">下载 PNG</el-button>
    <el-button :disabled="!ready" @click="readFile">获取文件信息</el-button>
  </el-space>
  <avue-license ref="license" :option="option" show-status @ready="ready = true"
                @error="status = $event.message" @asset-error="status = $event.error.message" />
  <el-alert v-if="status" :title="status" :closable="false" />
</template>

<script setup>
import { ref } from 'vue'
const license = ref(null)
const ready = ref(false)
const status = ref('')
const option = {
  width: 600, height: 340, backgroundColor: '#f0f7ff', mimeType: 'image/png',
  list: [
    { img: '/images/logo.png', left: 250, top: 28, width: 100, height: 100 },
    { text: '组件使用凭证', left: 300, top: 175, align: 'center', size: 28, bold: true, color: '#1e3a5f' },
    { text: '示例团队 · 仅用于演示 Canvas 合成', left: 300, top: 222, align: 'center', size: 18, color: '#475569' },
    { text: '编号 DEMO-001', left: 300, top: 278, align: 'center', size: 15, color: '#64748b' }
  ]
}
async function download() {
  try {
    await license.value.downFile('使用凭证.png', 'image/png')
    status.value = '已生成 PNG 下载'
  } catch (error) { status.value = error.message || '导出失败' }
}
async function readFile() {
  try {
    const file = await license.value.getFile('使用凭证.png', 'image/png')
    status.value = `${file.name} · ${file.type} · ${file.size} 字节`
  } catch (error) { status.value = error.message || '获取文件失败' }
}
</script>

Props 与 Option

参数	说明	类型	默认值
option	画布与图层配置，见下文	object	{}
showStatus	显示生成状态文字	boolean	false
id	保留属性，当前渲染不依赖该值	string / number	''

option 字段	说明	默认值
img	背景图片 URL，可省略	—
width / height	输出画布像素尺寸	有背景时按图片尺寸或宽度比例计算，否则 600 × 340
backgroundColor	画布底色，可设 transparent	#ffffff
crossOrigin	背景及图层图片的跨域模式，如 anonymous	不设置
mimeType / type	输出 MIME；优先 mimeType	image/jpeg
quality	输出质量，限制为 0 至 1	0.92
list	按数组顺序绘制的图层	[]

图层配置

图层包含 img 时按图片处理，否则按文字处理。

字段	说明	默认值
left / top	图层坐标	0
img / width / height / crossOrigin	图片地址、尺寸、跨域模式；只传宽度时按比例计算高度	图片原始尺寸
text	文字内容，支持换行	''
size / bold	字号 / 加粗	16 / false
style / fontFamily	字体名称，优先 style	sans-serif
color	文字颜色	#000000
align / baseline	Canvas 文本对齐方式 / 基线	left / alphabetic
lineHeight / maxWidth	行高 / 自动换行最大宽度	字号的 1.5 倍 / 不限制
rotate / opacity	文字旋转角度 / 不透明度	0 / 1

图片跨域可用性由图片服务的响应头决定。背景图失败会使本次生成失败；单独图层图片失败触发 asset-error 并继续生成其余图层。

Events

事件	参数	说明
ready / change	{ base64, width, height }	一次完整生成成功
error	{ error, message }	生成失败或 PDF 依赖缺失
asset-error	{ error, layer, index }	某个图层图片加载失败
download	图片为 { type: 'image', filename, base64 }；PDF 为 { type: 'pdf', filename }	导出已调用

Methods 与 Slots

方法	返回值	说明
init()	Promise<payload 或 null>	重新生成
getBase64(type?, quality?)	Promise<string>	等待生成完成后返回 Data URL
getFile(name?, type?, quality?)	Promise<File>	返回文件，默认文件名为时间戳 .jpg
downFile(filename?, type?, quality?)	Promise<string>	下载图片并返回 Data URL
getPdf(name?)	Promise<void>	导出 PDF，参数无需 .pdf 后缀
toDataURL(type?, quality?)	string	同步读取当前画布，不等待生成完成

默认插槽参数为 { ready, loading, error }。通过 ref 调用异步导出方法时应 await 并捕获失败，文件后缀需与 MIME 一致。

只有 PDF 导出需要提前提供 window.jsPDF 构造器；若从 npm 导入 jsPDF，请在客户端入口将其赋给 window.jsPDF。图片导出不依赖 jsPDF。