825 lines
24 KiB
TypeScript
825 lines
24 KiB
TypeScript
import JsBarcode from 'jsbarcode';
|
||
import QRCode from 'qrcode';
|
||
import { TemplateElement, RecordRow, LabelTemplate } from './types';
|
||
import {
|
||
resolveElementValue,
|
||
isGraphicContentEmpty,
|
||
shouldRenderElement,
|
||
ContentResolveMode,
|
||
} from './utils';
|
||
import {
|
||
resolveCornerRadiiPx,
|
||
resolveBorderSides,
|
||
resolvePaddingMm,
|
||
getPaddedRectPx,
|
||
traceRoundedRect,
|
||
drawElementFill,
|
||
drawElementBorders,
|
||
drawElementChrome,
|
||
} from './elementBox';
|
||
import {
|
||
iterTableCells,
|
||
getCellAnchor,
|
||
getCellData,
|
||
getEffectiveCellStyle,
|
||
getTableRows,
|
||
getTableCols,
|
||
buildTableGridBoundariesPx,
|
||
getCellRectPx,
|
||
} from './tableUtils';
|
||
|
||
const GENERATOR_TRANSPARENT_BG = '#00000000';
|
||
|
||
function measureLineWidth(ctx: CanvasRenderingContext2D, line: string): number {
|
||
return ctx.measureText(line).width;
|
||
}
|
||
|
||
function getTextLineSpan(
|
||
textX: number,
|
||
lineWidth: number,
|
||
textAlign: CanvasTextAlign
|
||
): { left: number; right: number } {
|
||
if (textAlign === 'center') {
|
||
return { left: textX - lineWidth / 2, right: textX + lineWidth / 2 };
|
||
}
|
||
if (textAlign === 'right') {
|
||
return { left: textX - lineWidth, right: textX };
|
||
}
|
||
return { left: textX, right: textX + lineWidth };
|
||
}
|
||
|
||
function drawTextLineDecorations(
|
||
ctx: CanvasRenderingContext2D,
|
||
elem: TemplateElement,
|
||
textX: number,
|
||
lineY: number,
|
||
line: string,
|
||
fontSizePx: number,
|
||
textAlign: CanvasTextAlign
|
||
) {
|
||
if (!elem.textUnderline && !elem.textLineThrough) return;
|
||
const lineWidth = measureLineWidth(ctx, line);
|
||
const { left, right } = getTextLineSpan(textX, lineWidth, textAlign);
|
||
const color = elem.textColor || '#111827';
|
||
ctx.save();
|
||
ctx.strokeStyle = color;
|
||
ctx.lineWidth = Math.max(1, fontSizePx * 0.06);
|
||
ctx.beginPath();
|
||
if (elem.textUnderline) {
|
||
const y = lineY + fontSizePx * 0.35;
|
||
ctx.moveTo(left, y);
|
||
ctx.lineTo(right, y);
|
||
}
|
||
if (elem.textLineThrough) {
|
||
const y = lineY;
|
||
ctx.moveTo(left, y);
|
||
ctx.lineTo(right, y);
|
||
}
|
||
ctx.stroke();
|
||
ctx.restore();
|
||
}
|
||
|
||
function loadImage(src: string): Promise<HTMLImageElement> {
|
||
return new Promise((resolve, reject) => {
|
||
const img = new Image();
|
||
img.crossOrigin = 'anonymous';
|
||
img.onload = () => resolve(img);
|
||
img.onerror = () => reject(new Error('Image load failed'));
|
||
img.src = src;
|
||
});
|
||
}
|
||
|
||
function loadImageOrNull(src: string): Promise<HTMLImageElement | null> {
|
||
const trimmed = src.trim();
|
||
if (!trimmed) return Promise.resolve(null);
|
||
return loadImage(trimmed).catch(() => null);
|
||
}
|
||
|
||
async function resolveElementImage(
|
||
elem: TemplateElement,
|
||
primarySrc: string,
|
||
mode: ContentResolveMode
|
||
): Promise<{ img: HTMLImageElement | null; showPlaceholder: boolean }> {
|
||
const primary = primarySrc.trim();
|
||
const fallback = (elem.defaultImage ?? '').trim();
|
||
|
||
let img = await loadImageOrNull(primary);
|
||
if (!img && fallback) {
|
||
img = await loadImageOrNull(fallback);
|
||
}
|
||
|
||
if (img) return { img, showPlaceholder: false };
|
||
|
||
if (mode === 'design' && !primary && !fallback) {
|
||
return { img: null, showPlaceholder: true };
|
||
}
|
||
|
||
return { img: null, showPlaceholder: false };
|
||
}
|
||
|
||
function drawImageWithFit(
|
||
ctx: CanvasRenderingContext2D,
|
||
img: HTMLImageElement,
|
||
x: number,
|
||
y: number,
|
||
w: number,
|
||
h: number,
|
||
fit: 'contain' | 'cover' | 'fill' = 'contain'
|
||
) {
|
||
if (fit === 'fill') {
|
||
ctx.drawImage(img, x, y, w, h);
|
||
return;
|
||
}
|
||
const imgRatio = img.width / img.height;
|
||
const boxRatio = w / h;
|
||
if (fit === 'contain') {
|
||
let dw = w;
|
||
let dh = h;
|
||
let dx = x;
|
||
let dy = y;
|
||
if (imgRatio > boxRatio) {
|
||
dh = w / imgRatio;
|
||
dy = y + (h - dh) / 2;
|
||
} else {
|
||
dw = h * imgRatio;
|
||
dx = x + (w - dw) / 2;
|
||
}
|
||
ctx.drawImage(img, dx, dy, dw, dh);
|
||
return;
|
||
}
|
||
let sx = 0;
|
||
let sy = 0;
|
||
let sw = img.width;
|
||
let sh = img.height;
|
||
if (imgRatio > boxRatio) {
|
||
sw = img.height * boxRatio;
|
||
sx = (img.width - sw) / 2;
|
||
} else {
|
||
sh = img.width / boxRatio;
|
||
sy = (img.height - sh) / 2;
|
||
}
|
||
ctx.drawImage(img, sx, sy, sw, sh, x, y, w, h);
|
||
}
|
||
|
||
function applyElementRotation(
|
||
ctx: CanvasRenderingContext2D,
|
||
x: number,
|
||
y: number,
|
||
w: number,
|
||
h: number,
|
||
rotationDeg: number | undefined
|
||
) {
|
||
const rotation = rotationDeg ?? 0;
|
||
if (rotation === 0) return;
|
||
const cx = x + w / 2;
|
||
const cy = y + h / 2;
|
||
ctx.translate(cx, cy);
|
||
ctx.rotate((rotation * Math.PI) / 180);
|
||
ctx.translate(-cx, -cy);
|
||
}
|
||
|
||
function layoutHorizontalTextLines(
|
||
ctx: CanvasRenderingContext2D,
|
||
value: string,
|
||
writableW: number,
|
||
wordWrap: boolean
|
||
): string[] {
|
||
const lines: string[] = [];
|
||
const paragraphs = String(value).split(/\r?\n/);
|
||
|
||
for (const paragraph of paragraphs) {
|
||
if (!wordWrap) {
|
||
lines.push(paragraph);
|
||
continue;
|
||
}
|
||
let currentLine = '';
|
||
for (let i = 0; i < paragraph.length; i++) {
|
||
const char = paragraph[i];
|
||
const testLine = currentLine + char;
|
||
const metrics = ctx.measureText(testLine);
|
||
if (metrics.width > writableW - 4 && i > 0 && currentLine.length > 0) {
|
||
lines.push(currentLine);
|
||
currentLine = char;
|
||
} else {
|
||
currentLine = testLine;
|
||
}
|
||
}
|
||
if (currentLine || lines.length === 0) {
|
||
lines.push(currentLine);
|
||
}
|
||
}
|
||
|
||
return lines;
|
||
}
|
||
|
||
/** 竖排：按列组织字符，列高受限时换列 */
|
||
function layoutVerticalTextColumns(
|
||
value: string,
|
||
writableH: number,
|
||
lineHeight: number,
|
||
wordWrap: boolean
|
||
): string[][] {
|
||
const columns: string[][] = [];
|
||
const paragraphs = String(value).split(/\r?\n/);
|
||
|
||
for (let p = 0; p < paragraphs.length; p++) {
|
||
const paragraph = paragraphs[p];
|
||
if (!wordWrap) {
|
||
columns.push([...paragraph]);
|
||
} else {
|
||
let currentColumn: string[] = [];
|
||
for (const char of paragraph) {
|
||
const colHeight = (currentColumn.length + 1) * lineHeight;
|
||
if (colHeight > writableH - 4 && currentColumn.length > 0) {
|
||
columns.push(currentColumn);
|
||
currentColumn = [char];
|
||
} else {
|
||
currentColumn.push(char);
|
||
}
|
||
}
|
||
if (currentColumn.length > 0) {
|
||
columns.push(currentColumn);
|
||
}
|
||
}
|
||
if (p < paragraphs.length - 1) {
|
||
columns.push([]);
|
||
}
|
||
}
|
||
|
||
if (columns.length === 0) {
|
||
columns.push([]);
|
||
}
|
||
|
||
return columns;
|
||
}
|
||
|
||
function drawTextContentInBox(
|
||
ctx: CanvasRenderingContext2D,
|
||
elem: TemplateElement,
|
||
boxX: number,
|
||
boxY: number,
|
||
boxW: number,
|
||
boxH: number,
|
||
value: string,
|
||
scale: number
|
||
) {
|
||
const pad = resolvePaddingMm(elem);
|
||
const padPx = {
|
||
top: Math.round(pad.top * scale),
|
||
right: Math.round(pad.right * scale),
|
||
bottom: Math.round(pad.bottom * scale),
|
||
left: Math.round(pad.left * scale),
|
||
};
|
||
const writableW = Math.max(1, boxW - padPx.left - padPx.right);
|
||
const writableH = Math.max(1, boxH - padPx.top - padPx.bottom);
|
||
|
||
const fontStyle = elem.fontStyle === 'italic' ? 'italic ' : '';
|
||
const fontWeight = elem.fontWeight === 'bold' ? 'bold ' : '';
|
||
const fontSizePx = Math.max(6, Math.max(1, Math.round(elem.fontSize * 0.352777 * scale)));
|
||
const fontFamily =
|
||
elem.fontFamily === 'mono'
|
||
? 'JetBrains Mono, SFMono-Regular, Consolas, Courier New, monospace'
|
||
: elem.fontFamily === 'serif'
|
||
? 'Georgia, Times New Roman, serif'
|
||
: 'Inter, system-ui, -apple-system, Arial, sans-serif';
|
||
|
||
ctx.font = `${fontStyle}${fontWeight}${fontSizePx}px ${fontFamily}`.trim();
|
||
ctx.fillStyle = elem.textColor || '#111827';
|
||
|
||
const letterSpacingPx = Math.max(0, (elem.letterSpacing ?? 0) * scale);
|
||
if (letterSpacingPx > 0 && 'letterSpacing' in ctx) {
|
||
(ctx as CanvasRenderingContext2D & { letterSpacing: string }).letterSpacing =
|
||
`${letterSpacingPx}px`;
|
||
}
|
||
|
||
const wordWrap = elem.wordWrap !== false;
|
||
const lineHeight = fontSizePx * 1.25;
|
||
const columnWidth = lineHeight;
|
||
const isVertical = elem.textWritingMode === 'vertical';
|
||
ctx.textBaseline = 'middle';
|
||
|
||
const textScaleX = Math.max(0.1, Math.min(5, elem.textScaleX ?? 1));
|
||
const textScaleY = Math.max(0.1, Math.min(5, elem.textScaleY ?? 1));
|
||
const transformOriginX = boxX + padPx.left + writableW / 2;
|
||
const transformOriginY = boxY + padPx.top + writableH / 2;
|
||
|
||
ctx.save();
|
||
if (textScaleX !== 1 || textScaleY !== 1) {
|
||
ctx.translate(transformOriginX, transformOriginY);
|
||
ctx.scale(textScaleX, textScaleY);
|
||
ctx.translate(-transformOriginX, -transformOriginY);
|
||
}
|
||
|
||
const vAlign = elem.verticalAlign ?? 'middle';
|
||
|
||
if (isVertical) {
|
||
const columns = layoutVerticalTextColumns(String(value), writableH, lineHeight, wordWrap);
|
||
const totalColumnsWidth = columns.length * columnWidth;
|
||
|
||
let startX: number;
|
||
if (elem.textAlign === 'center') {
|
||
startX = boxX + padPx.left + Math.max(0, (writableW - totalColumnsWidth) / 2) + columnWidth / 2;
|
||
} else if (elem.textAlign === 'right') {
|
||
startX = boxX + padPx.left + Math.max(0, writableW - totalColumnsWidth) + columnWidth / 2;
|
||
} else {
|
||
startX = boxX + padPx.left + columnWidth / 2;
|
||
}
|
||
ctx.textAlign = 'center';
|
||
|
||
for (let col = 0; col < columns.length; col++) {
|
||
const column = columns[col];
|
||
const colTextHeight = column.length * lineHeight;
|
||
let colStartY: number;
|
||
if (vAlign === 'top') {
|
||
colStartY = boxY + padPx.top + lineHeight / 2;
|
||
} else if (vAlign === 'bottom') {
|
||
colStartY = boxY + boxH - padPx.bottom - colTextHeight + lineHeight / 2;
|
||
} else {
|
||
colStartY =
|
||
boxY + padPx.top + Math.max(0, (writableH - colTextHeight) / 2) + lineHeight / 2;
|
||
}
|
||
|
||
const colX = startX + col * columnWidth;
|
||
for (let i = 0; i < column.length; i++) {
|
||
const charY = colStartY + i * lineHeight;
|
||
if (charY - lineHeight / 2 <= boxY + boxH - padPx.bottom) {
|
||
ctx.fillText(column[i], colX, charY);
|
||
}
|
||
}
|
||
}
|
||
} else {
|
||
const lines = layoutHorizontalTextLines(ctx, String(value), writableW, wordWrap);
|
||
const totalTextHeight = lines.length * lineHeight;
|
||
|
||
let textX = boxX + padPx.left;
|
||
let textAlign: CanvasTextAlign = 'left';
|
||
if (elem.textAlign === 'center') {
|
||
textX = boxX + padPx.left + writableW / 2;
|
||
textAlign = 'center';
|
||
} else if (elem.textAlign === 'right') {
|
||
textX = boxX + padPx.left + (writableW - 2);
|
||
textAlign = 'right';
|
||
} else {
|
||
textX = boxX + padPx.left + 2;
|
||
}
|
||
ctx.textAlign = textAlign;
|
||
|
||
let startY: number;
|
||
if (vAlign === 'top') {
|
||
startY = boxY + padPx.top + lineHeight / 2;
|
||
} else if (vAlign === 'bottom') {
|
||
startY = boxY + boxH - padPx.bottom - totalTextHeight + lineHeight / 2;
|
||
} else {
|
||
startY = boxY + padPx.top + Math.max(0, (writableH - totalTextHeight) / 2) + lineHeight / 2;
|
||
}
|
||
|
||
for (let i = 0; i < lines.length; i++) {
|
||
const lineY = startY + i * lineHeight;
|
||
if (lineY - lineHeight / 2 <= boxY + boxH - padPx.bottom) {
|
||
const line = lines[i];
|
||
ctx.fillText(line, textX, lineY);
|
||
drawTextLineDecorations(ctx, elem, textX, lineY, line, fontSizePx, textAlign);
|
||
}
|
||
}
|
||
}
|
||
|
||
ctx.restore();
|
||
if (letterSpacingPx > 0 && 'letterSpacing' in ctx) {
|
||
(ctx as CanvasRenderingContext2D & { letterSpacing: string }).letterSpacing = '0px';
|
||
}
|
||
}
|
||
|
||
function alignStrokeCoord(v: number): number {
|
||
return Math.round(v) + 0.5;
|
||
}
|
||
|
||
/** 统一绘制表格网格线，避免相邻单元格各画一条边造成双线 */
|
||
function drawTableGridLines(
|
||
ctx: CanvasRenderingContext2D,
|
||
elem: TemplateElement,
|
||
ex: number,
|
||
ey: number,
|
||
scale: number
|
||
) {
|
||
const borderMm = elem.tableBorderWidth ?? 0.2;
|
||
if (borderMm <= 0) return;
|
||
|
||
const borderW = borderMm * scale;
|
||
if (borderW <= 0) return;
|
||
|
||
const borderColor = elem.tableBorderColor ?? '#374151';
|
||
const rows = getTableRows(elem);
|
||
const cols = getTableCols(elem);
|
||
const { rowBounds, colBounds } = buildTableGridBoundariesPx(elem, scale, ex, ey);
|
||
|
||
const left = colBounds[0];
|
||
const top = rowBounds[0];
|
||
const width = colBounds[colBounds.length - 1] - left;
|
||
const height = rowBounds[rowBounds.length - 1] - top;
|
||
|
||
ctx.strokeStyle = borderColor;
|
||
ctx.lineWidth = borderW;
|
||
ctx.beginPath();
|
||
|
||
const inset = borderW / 2;
|
||
ctx.rect(
|
||
alignStrokeCoord(left + inset),
|
||
alignStrokeCoord(top + inset),
|
||
Math.max(0, width - borderW),
|
||
Math.max(0, height - borderW)
|
||
);
|
||
|
||
for (let r = 1; r < rows; r++) {
|
||
const y = alignStrokeCoord(rowBounds[r]);
|
||
for (let c = 0; c < cols; c++) {
|
||
const anchorAbove = getCellAnchor(elem, r - 1, c);
|
||
const anchorBelow = getCellAnchor(elem, r, c);
|
||
const sameMerge =
|
||
anchorAbove.row === anchorBelow.row && anchorAbove.col === anchorBelow.col;
|
||
if (!sameMerge) {
|
||
ctx.moveTo(alignStrokeCoord(colBounds[c]), y);
|
||
ctx.lineTo(alignStrokeCoord(colBounds[c + 1]), y);
|
||
}
|
||
}
|
||
}
|
||
|
||
for (let c = 1; c < cols; c++) {
|
||
const x = alignStrokeCoord(colBounds[c]);
|
||
for (let r = 0; r < rows; r++) {
|
||
const anchorLeft = getCellAnchor(elem, r, c - 1);
|
||
const anchorRight = getCellAnchor(elem, r, c);
|
||
const sameMerge =
|
||
anchorLeft.row === anchorRight.row && anchorLeft.col === anchorRight.col;
|
||
if (!sameMerge) {
|
||
ctx.moveTo(x, alignStrokeCoord(rowBounds[r]));
|
||
ctx.lineTo(x, alignStrokeCoord(rowBounds[r + 1]));
|
||
}
|
||
}
|
||
}
|
||
|
||
ctx.stroke();
|
||
}
|
||
|
||
async function drawTableElement(
|
||
ctx: CanvasRenderingContext2D,
|
||
elem: TemplateElement,
|
||
ex: number,
|
||
ey: number,
|
||
ew: number,
|
||
eh: number,
|
||
scale: number,
|
||
rowData: RecordRow | null,
|
||
rowIndex: number,
|
||
variableDefaults: Record<string, string> | null | undefined,
|
||
mode: ContentResolveMode
|
||
) {
|
||
const radii = resolveCornerRadiiPx(elem, scale, ew, eh);
|
||
const sides = resolveBorderSides(elem);
|
||
|
||
drawElementFill(ctx, ex, ey, ew, eh, elem, radii);
|
||
drawElementBorders(ctx, ex, ey, ew, eh, radii, sides, elem, scale);
|
||
|
||
const { rowBounds, colBounds } = buildTableGridBoundariesPx(elem, scale, ex, ey);
|
||
const gridX = colBounds[0];
|
||
const gridY = rowBounds[0];
|
||
const gridW = colBounds[colBounds.length - 1] - gridX;
|
||
const gridH = rowBounds[rowBounds.length - 1] - gridY;
|
||
ctx.save();
|
||
ctx.beginPath();
|
||
ctx.rect(gridX, gridY, gridW, gridH);
|
||
ctx.clip();
|
||
|
||
const anchors = iterTableCells(elem);
|
||
for (const { row, col } of anchors) {
|
||
const { x: cellX, y: cellY, width: cellW, height: cellH } = getCellRectPx(
|
||
elem,
|
||
row,
|
||
col,
|
||
scale,
|
||
ex,
|
||
ey
|
||
);
|
||
|
||
const cellData = getCellData(elem, row, col);
|
||
if (cellData?.backgroundColor && cellData.backgroundColor !== 'transparent') {
|
||
ctx.fillStyle = cellData.backgroundColor;
|
||
ctx.fillRect(cellX, cellY, cellW, cellH);
|
||
}
|
||
|
||
const textElem = getEffectiveCellStyle(elem, row, col);
|
||
if (!textElem.content.trim()) continue;
|
||
|
||
const cellValue = resolveElementValue(textElem, rowData, rowIndex, variableDefaults, mode);
|
||
const displayText = String(cellValue ?? '').trim();
|
||
if (!displayText) continue;
|
||
|
||
drawTextContentInBox(
|
||
ctx,
|
||
{
|
||
...textElem,
|
||
padding: 0,
|
||
paddingTop: 0,
|
||
paddingRight: 0,
|
||
paddingBottom: 0,
|
||
paddingLeft: 0,
|
||
},
|
||
cellX,
|
||
cellY,
|
||
cellW,
|
||
cellH,
|
||
displayText,
|
||
scale
|
||
);
|
||
}
|
||
|
||
drawTableGridLines(ctx, elem, ex, ey, scale);
|
||
ctx.restore();
|
||
}
|
||
|
||
function drawImagePlaceholder(
|
||
ctx: CanvasRenderingContext2D,
|
||
x: number,
|
||
y: number,
|
||
w: number,
|
||
h: number,
|
||
message: string
|
||
) {
|
||
ctx.fillStyle = '#2a2a2a';
|
||
ctx.fillRect(x, y, w, h);
|
||
ctx.strokeStyle = '#555';
|
||
ctx.lineWidth = 1;
|
||
ctx.setLineDash([4, 4]);
|
||
ctx.strokeRect(x + 0.5, y + 0.5, w - 1, h - 1);
|
||
ctx.setLineDash([]);
|
||
ctx.fillStyle = '#888';
|
||
ctx.font = '10px sans-serif';
|
||
ctx.textAlign = 'center';
|
||
ctx.textBaseline = 'middle';
|
||
ctx.fillText(message, x + w / 2, y + h / 2);
|
||
}
|
||
|
||
export interface RenderLabelOptions {
|
||
widthMm: number;
|
||
heightMm: number;
|
||
elements: TemplateElement[];
|
||
rowData: RecordRow | null;
|
||
rowIndex: number;
|
||
showBorder?: boolean;
|
||
transparentBackground?: boolean;
|
||
variableDefaults?: Record<string, string> | null;
|
||
mode?: ContentResolveMode;
|
||
/** 输出参考背景（生成/打印），绘制在元素下层 */
|
||
referenceBackground?: string;
|
||
referenceBackgroundOpacity?: number;
|
||
referenceBackgroundFit?: 'contain' | 'cover' | 'fill';
|
||
/** 渲染倍率，默认 16；PDF 导出可用较低倍率以减轻内存与耗时 */
|
||
scale?: number;
|
||
/** 输出格式，默认 png */
|
||
imageFormat?: 'png' | 'jpeg';
|
||
jpegQuality?: number;
|
||
/** 为 false 时不裁剪到画布边界（用于拖动浮层完整显示元素） */
|
||
clipToCanvas?: boolean;
|
||
}
|
||
|
||
export type ReferenceBackgroundRenderOptions = Pick<
|
||
RenderLabelOptions,
|
||
'referenceBackground' | 'referenceBackgroundOpacity' | 'referenceBackgroundFit'
|
||
>;
|
||
|
||
type ReferenceBackgroundTemplate = Pick<
|
||
LabelTemplate,
|
||
'previewReferenceBackground' | 'previewReferenceBackgroundOpacity' | 'previewReferenceBackgroundFit'
|
||
>;
|
||
|
||
function buildReferenceBackgroundRenderOptions(
|
||
template: ReferenceBackgroundTemplate
|
||
): ReferenceBackgroundRenderOptions {
|
||
if (!template.previewReferenceBackground) {
|
||
return {};
|
||
}
|
||
return {
|
||
referenceBackground: template.previewReferenceBackground,
|
||
referenceBackgroundOpacity: template.previewReferenceBackgroundOpacity ?? 100,
|
||
referenceBackgroundFit: template.previewReferenceBackgroundFit ?? 'cover',
|
||
};
|
||
}
|
||
|
||
/** 模板列表 / 设计预览等：有参考图即绘制 */
|
||
export function resolveReferenceBackgroundForPreview(
|
||
template: ReferenceBackgroundTemplate
|
||
): ReferenceBackgroundRenderOptions {
|
||
return buildReferenceBackgroundRenderOptions(template);
|
||
}
|
||
|
||
/** 模板开启「输出参考背景」时，供 PDF / 打印 / 排版预览使用的渲染参数 */
|
||
export function resolveReferenceBackgroundForOutput(
|
||
template: ReferenceBackgroundTemplate &
|
||
Pick<LabelTemplate, 'includeReferenceBackgroundInOutput'>
|
||
): ReferenceBackgroundRenderOptions {
|
||
if (!template.includeReferenceBackgroundInOutput) {
|
||
return {};
|
||
}
|
||
return buildReferenceBackgroundRenderOptions(template);
|
||
}
|
||
|
||
/** 离屏渲染标签为 PNG data URL */
|
||
export async function renderLabelToDataUrl(options: RenderLabelOptions): Promise<string> {
|
||
const {
|
||
widthMm,
|
||
heightMm,
|
||
elements,
|
||
rowData,
|
||
rowIndex,
|
||
showBorder = false,
|
||
transparentBackground = false,
|
||
variableDefaults = null,
|
||
mode = 'design',
|
||
referenceBackground,
|
||
referenceBackgroundOpacity = 100,
|
||
referenceBackgroundFit = 'cover',
|
||
scale: scaleOption = 16,
|
||
imageFormat = 'png',
|
||
jpegQuality = 0.92,
|
||
clipToCanvas = true,
|
||
} = options;
|
||
|
||
const scale = scaleOption;
|
||
const canvas = document.createElement('canvas');
|
||
canvas.width = Math.max(1, Math.round(widthMm * scale));
|
||
canvas.height = Math.max(1, Math.round(heightMm * scale));
|
||
|
||
const ctx = canvas.getContext('2d');
|
||
if (!ctx) return '';
|
||
|
||
if (!transparentBackground) {
|
||
ctx.fillStyle = '#ffffff';
|
||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||
} else {
|
||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||
}
|
||
|
||
if (showBorder) {
|
||
ctx.strokeStyle = '#cccccc';
|
||
ctx.lineWidth = 1;
|
||
ctx.setLineDash([4, 4]);
|
||
ctx.strokeRect(0, 0, canvas.width, canvas.height);
|
||
ctx.setLineDash([]);
|
||
}
|
||
|
||
if (referenceBackground) {
|
||
const refImg = await loadImageOrNull(referenceBackground);
|
||
if (refImg) {
|
||
ctx.save();
|
||
ctx.globalAlpha = Math.min(1, Math.max(0, referenceBackgroundOpacity / 100));
|
||
drawImageWithFit(ctx, refImg, 0, 0, canvas.width, canvas.height, referenceBackgroundFit);
|
||
ctx.restore();
|
||
}
|
||
}
|
||
|
||
ctx.save();
|
||
if (clipToCanvas) {
|
||
ctx.beginPath();
|
||
ctx.rect(0, 0, canvas.width, canvas.height);
|
||
ctx.clip();
|
||
}
|
||
|
||
for (const elem of elements) {
|
||
const ex = Math.round(elem.x * scale);
|
||
const ey = Math.round(elem.y * scale);
|
||
const ew = Math.round(elem.width * scale);
|
||
const eh = Math.round(elem.height * scale);
|
||
|
||
if (!shouldRenderElement(elem, rowData, rowIndex, variableDefaults, mode)) {
|
||
continue;
|
||
}
|
||
|
||
const value = resolveElementValue(elem, rowData, rowIndex, variableDefaults, mode);
|
||
|
||
if (elem.type !== 'table' && isGraphicContentEmpty(elem, value, mode)) {
|
||
continue;
|
||
}
|
||
|
||
ctx.save();
|
||
applyElementRotation(ctx, ex, ey, ew, eh, elem.rotation);
|
||
|
||
if (elem.type === 'text') {
|
||
const radii = resolveCornerRadiiPx(elem, scale, ew, eh);
|
||
const sides = resolveBorderSides(elem);
|
||
|
||
ctx.save();
|
||
traceRoundedRect(ctx, ex, ey, ew, eh, radii);
|
||
ctx.clip();
|
||
|
||
drawElementFill(ctx, ex, ey, ew, eh, elem, radii);
|
||
|
||
drawTextContentInBox(ctx, elem, ex, ey, ew, eh, String(value), scale);
|
||
|
||
ctx.restore();
|
||
drawElementBorders(ctx, ex, ey, ew, eh, radii, sides, elem, scale);
|
||
} else if (elem.type === 'barcode') {
|
||
try {
|
||
drawElementChrome(ctx, ex, ey, ew, eh, elem, scale);
|
||
const inner = getPaddedRectPx(ex, ey, ew, eh, elem, scale);
|
||
const tempCanvas = document.createElement('canvas');
|
||
const barcodeValue = value ? String(value).trim() : mode === 'design' ? 'SAMPLE' : '';
|
||
|
||
if (barcodeValue) {
|
||
JsBarcode(tempCanvas, barcodeValue, {
|
||
format: elem.barcodeFormat || 'CODE128',
|
||
width: 2,
|
||
height: 40,
|
||
displayValue: elem.showText ?? false,
|
||
fontSize: 14,
|
||
margin: 2,
|
||
background: GENERATOR_TRANSPARENT_BG,
|
||
});
|
||
|
||
ctx.drawImage(tempCanvas, inner.x, inner.y, inner.w, inner.h);
|
||
}
|
||
} catch (error) {
|
||
console.warn('Barcode drawing failed', error);
|
||
if (mode === 'design') {
|
||
const inner = getPaddedRectPx(ex, ey, ew, eh, elem, scale);
|
||
ctx.fillStyle = '#f3f4f6';
|
||
ctx.fillRect(inner.x, inner.y, inner.w, inner.h);
|
||
ctx.strokeStyle = '#ef4444';
|
||
ctx.lineWidth = 2;
|
||
ctx.strokeRect(inner.x, inner.y, inner.w, inner.h);
|
||
ctx.fillStyle = '#b91c1c';
|
||
ctx.font = '10px Courier New';
|
||
ctx.textAlign = 'center';
|
||
ctx.fillText('ERR BARCODE', inner.x + inner.w / 2, inner.y + inner.h / 2);
|
||
}
|
||
}
|
||
} else if (elem.type === 'qrcode') {
|
||
try {
|
||
drawElementChrome(ctx, ex, ey, ew, eh, elem, scale);
|
||
const inner = getPaddedRectPx(ex, ey, ew, eh, elem, scale);
|
||
const qrValue = value ? String(value).trim() : mode === 'design' ? 'SAMPLE QR' : '';
|
||
|
||
if (qrValue) {
|
||
const tempCanvas = document.createElement('canvas');
|
||
await QRCode.toCanvas(tempCanvas, qrValue, {
|
||
width: Math.max(64, inner.w),
|
||
margin: 0,
|
||
color: {
|
||
dark: '#000000',
|
||
light: GENERATOR_TRANSPARENT_BG,
|
||
},
|
||
});
|
||
|
||
ctx.drawImage(tempCanvas, inner.x, inner.y, inner.w, inner.h);
|
||
}
|
||
} catch (error) {
|
||
console.warn('QR code drawing failed', error);
|
||
if (mode === 'design') {
|
||
const inner = getPaddedRectPx(ex, ey, ew, eh, elem, scale);
|
||
ctx.fillStyle = '#f3f4f6';
|
||
ctx.fillRect(inner.x, inner.y, inner.w, inner.h);
|
||
ctx.strokeStyle = '#ef4444';
|
||
ctx.lineWidth = 1;
|
||
ctx.strokeRect(inner.x, inner.y, inner.w, inner.h);
|
||
}
|
||
}
|
||
} else if (elem.type === 'image') {
|
||
const primarySrc = value ? String(value).trim() : '';
|
||
const { img, showPlaceholder } = await resolveElementImage(elem, primarySrc, mode);
|
||
|
||
if (!img && !showPlaceholder) {
|
||
ctx.restore();
|
||
continue;
|
||
}
|
||
|
||
drawElementChrome(ctx, ex, ey, ew, eh, elem, scale);
|
||
const inner = getPaddedRectPx(ex, ey, ew, eh, elem, scale);
|
||
if (img) {
|
||
drawImageWithFit(ctx, img, inner.x, inner.y, inner.w, inner.h, elem.imageFit ?? 'contain');
|
||
} else {
|
||
drawImagePlaceholder(ctx, inner.x, inner.y, inner.w, inner.h, '图片');
|
||
}
|
||
} else if (elem.type === 'table') {
|
||
await drawTableElement(
|
||
ctx,
|
||
elem,
|
||
ex,
|
||
ey,
|
||
ew,
|
||
eh,
|
||
scale,
|
||
rowData,
|
||
rowIndex,
|
||
variableDefaults,
|
||
mode
|
||
);
|
||
}
|
||
|
||
ctx.restore();
|
||
}
|
||
|
||
ctx.restore();
|
||
|
||
return imageFormat === 'jpeg'
|
||
? canvas.toDataURL('image/jpeg', jpegQuality)
|
||
: canvas.toDataURL('image/png');
|
||
}
|