uview-ultra 4.5.46

package/components/up-poster/up-poster.uvue

@@ -0,0 +1,944 @@
+<template>
+	<view class="up-poster">
+		<canvas
+			v-if="showCanvas"
+			class="up-poster__canvas"
+			:id="canvasId"
+			:canvas-id="canvasId"
+			:style="canvasStyle"
+		></canvas>
+	</view>
+</template>
+
+<script setup lang="uts">
+import { computed, getCurrentInstance, nextTick, ref } from 'vue'
+import { createQrCells, getQrRenderCount } from '../up-qrcode/qrcode.uts'
+
+type PosterItem = {
+	type: string,
+	text: string,
+	src: string,
+	css: UTSJSONObject
+}
+
+type PosterImageAsset = {
+	src: string,
+	image: Image | null,
+	failed: boolean
+}
+
+type GradientStop = {
+	color: string,
+	offset: number
+}
+
+function toObject(value: any | null): UTSJSONObject {
+	if (value == null) {
+		return {} as UTSJSONObject
+	}
+	return value as UTSJSONObject
+}
+
+function stringValue(value: any | null, fallback: string = ''): string {
+	return value == null ? fallback : value.toString()
+}
+
+function numberValue(value: any | null, fallback: number = 0): number {
+	if (typeof value === 'number') {
+		return value
+	}
+	if (value == null) {
+		return fallback
+	}
+	const text = value.toString()
+	if (text.endsWith('rpx')) {
+		const parsed = parseFloat(text.substring(0, text.length - 3))
+		return isNaN(parsed) ? fallback : parsed * uni.getWindowInfo().windowWidth / 750
+	}
+	if (text.endsWith('px')) {
+		const parsed = parseFloat(text.substring(0, text.length - 2))
+		return isNaN(parsed) ? fallback : parsed
+	}
+	const parsed = parseFloat(text)
+	return isNaN(parsed) ? fallback : parsed
+}
+
+function characterWidth(character: string, fontSize: number): number {
+	// 全角字符（CJK 汉字、日文假名、韩文、CJK 标点、全角符号）约占一个字号宽。
+	// 注意必须包含 ︰-﹯ 与 ⺀-〾 两段：全角句号「。」、顿号「、」、书名号等
+	// 落在 CJK 标点区，漏掉会把中文标点按半角短算，行宽被低估。
+	if (/[⺀-〾㐀-鿿぀-ヿ가-힣豈-﫿︰-﹯＀-￯]/.test(character)) {
+		return fontSize
+	}
+	if (/\s/.test(character)) {
+		return fontSize * 0.28
+	}
+	return fontSize * 0.56
+}
+
+function estimateTextWidth(text: string, fontSize: number): number {
+	let width = 0
+	for (let index = 0; index < text.length; index++) {
+		width += characterWidth(text.charAt(index), fontSize)
+	}
+	return width
+}
+
+function colorValue(value: any | null, fallback: string): string {
+	const text = stringValue(value, fallback)
+	return text.length > 0 ? text : fallback
+}
+
+function splitGradientArgs(value: string): Array<string> {
+	const result = [] as Array<string>
+	let depth = 0
+	let start = 0
+	for (let i = 0; i < value.length; i++) {
+		const char = value.substring(i, i + 1)
+		if (char == '(') {
+			depth++
+		} else if (char == ')') {
+			depth--
+		} else if (char == ',' && depth == 0) {
+			result.push(value.substring(start, i).trim())
+			start = i + 1
+		}
+	}
+	const tail = value.substring(start).trim()
+	if (tail.length > 0) {
+		result.push(tail)
+	}
+	return result
+}
+
+function gradientBody(value: string): string {
+	const start = value.indexOf('(')
+	const end = value.lastIndexOf(')')
+	if (start < 0 || end <= start) {
+		return ''
+	}
+	return value.substring(start + 1, end)
+}
+
+function isGradientDirection(value: string): boolean {
+	return value.endsWith('deg') || value.startsWith('to ')
+}
+
+function parseGradientStop(value: string, index: number, total: number): GradientStop {
+	const parts = value.split(' ')
+	const color = parts.length > 0 ? parts[0].trim() : '#ffffff'
+	let offset = total <= 1 ? 0 : index / (total - 1)
+	for (let i = 1; i < parts.length; i++) {
+		const part = parts[i].trim()
+		if (part.endsWith('%')) {
+			const parsed = parseFloat(part.substring(0, part.length - 1))
+			if (!isNaN(parsed)) {
+				offset = Math.max(0, Math.min(1, parsed / 100))
+			}
+		}
+	}
+	return {
+		color: color.length > 0 ? color : '#ffffff',
+		offset
+	} as GradientStop
+}
+
+function parseGradientStops(background: string): Array<GradientStop> {
+	const args = splitGradientArgs(gradientBody(background))
+	const firstColorIndex = args.length > 0 && isGradientDirection(args[0]) ? 1 : 0
+	const total = args.length - firstColorIndex
+	const stops = [] as Array<GradientStop>
+	for (let i = firstColorIndex; i < args.length; i++) {
+		stops.push(parseGradientStop(args[i], i - firstColorIndex, total))
+	}
+	if (stops.length == 0) {
+		stops.push({ color: '#ffffff', offset: 0 } as GradientStop)
+		stops.push({ color: '#ffffff', offset: 1 } as GradientStop)
+	} else if (stops.length == 1) {
+		stops.push({ color: stops[0].color, offset: 1 } as GradientStop)
+	}
+	return stops
+}
+
+function gradientAngle(background: string): number {
+	const args = splitGradientArgs(gradientBody(background))
+	if (args.length == 0) {
+		return 135
+	}
+	const direction = args[0]
+	if (direction.endsWith('deg')) {
+		const parsed = parseFloat(direction.substring(0, direction.length - 3))
+		return isNaN(parsed) ? 135 : parsed
+	}
+	if (direction == 'to right') return 90
+	if (direction == 'to left') return 270
+	if (direction == 'to bottom') return 180
+	if (direction == 'to top') return 0
+	if (direction == 'to right bottom' || direction == 'to bottom right') return 135
+	if (direction == 'to left bottom' || direction == 'to bottom left') return 225
+	if (direction == 'to right top' || direction == 'to top right') return 45
+	if (direction == 'to left top' || direction == 'to top left') return 315
+	return 135
+}
+
+function createItem(raw: any | null): PosterItem {
+	const obj = toObject(raw)
+	return {
+		type: stringValue(obj['type']),
+		text: stringValue(obj['text']),
+		src: stringValue(obj['src']),
+		css: toObject(obj['css'])
+	} as PosterItem
+}
+
+function makeId(): string {
+	return 'up-poster-canvas-' + Date.now().toString()
+}
+
+defineOptions({
+	styleIsolation: 'app-and-page',
+	name: 'up-poster'
+})
+
+const props = defineProps({
+	json: {
+		type: Object,
+		default(): UTSJSONObject {
+			return {} as UTSJSONObject
+		}
+	}
+})
+
+const emit = defineEmits(['export', 'error'])
+const instance = getCurrentInstance()!.proxy!
+
+const canvasId = ref(makeId())
+const showCanvas = ref(false)
+const canvasWidth = ref(375)
+const canvasHeight = ref(557)
+const canvasContext = ref<CanvasContext | null>(null)
+const ctx = ref<CanvasRenderingContext2D | null>(null)
+const dpr = ref(1)
+let posterImageAssets = [] as Array<PosterImageAsset>
+
+function getDrawScale(): number {
+	// #ifdef APP-HARMONY
+	return dpr.value
+	// #endif
+	// #ifndef APP-HARMONY
+	return 1
+	// #endif
+}
+
+function scaleCanvasValue(value: number): number {
+	// 鸿蒙 uni-canvas 会在每个数值参数上执行 px2vp，需在调用层抵消一次。
+	// 其它平台不改变原有 Canvas 坐标。
+	return value * getDrawScale()
+}
+
+function measuredTextWidth(context: CanvasRenderingContext2D, text: string, fontSize: number): number {
+	// 鸿蒙 CanvasContext.measureText 的同步返回值通常为 0；若运行时返回了物理
+	// 像素宽度，也要除以绘制倍率后再与逻辑宽度比较。
+	const measured = context.measureText(text).width / getDrawScale()
+	return measured > 0 ? measured : estimateTextWidth(text, fontSize)
+}
+
+function normalizeCanvasColor(color: string): string {
+	return color == 'transparent' ? 'rgba(0, 0, 0, 0)' : color
+}
+
+function canvasPixelRatio(): number {
+	// #ifdef APP-HARMONY
+	const ratio = uni.getWindowInfo().pixelRatio
+	return ratio > 0 ? ratio : 1
+	// #endif
+	// #ifndef APP-HARMONY
+	return 1
+	// #endif
+}
+
+const canvasStyle = computed((): UTSJSONObject => {
+	return {
+		width: canvasWidth.value.toString() + 'px',
+		height: canvasHeight.value.toString() + 'px'
+	} as UTSJSONObject
+})
+
+function getJson(): UTSJSONObject {
+	return toObject(props.json)
+}
+
+function getPosterCss(): UTSJSONObject {
+	return toObject(getJson()['css'])
+}
+
+function getViews(): Array<any> {
+	const views = getJson()['views']
+	if (views == null) {
+		return [] as Array<any>
+	}
+	return views as Array<any>
+}
+
+function prepareSize(): void {
+	const css = getPosterCss()
+	canvasWidth.value = numberValue(css['width'], 375)
+	canvasHeight.value = numberValue(css['height'], 557)
+}
+
+function initCanvas(): Promise<void> {
+	return new Promise((resolve, reject) => {
+		uni.createCanvasContextAsync({
+			id: canvasId.value.toString() as string.IDString,
+			component: instance,
+			success: (context: CanvasContext) => {
+				const context2d = context.getContext('2d')
+				if (context2d == null) {
+					reject(new Error('无法获取海报画布上下文'))
+					return
+				}
+				canvasContext.value = context
+				// 画布后备存储是「布局尺寸(vp) × dpr」个物理像素，而鸿蒙运行时会对
+				// 每个绘制坐标做一次 px2vp（即 ÷dpr）。所有绘制参数统一乘 dpr
+				// 抵消这次转换，避免使用会触发异常超大 Surface 的矩阵缩放。
+				dpr.value = canvasPixelRatio()
+				const canvas = context2d.canvas
+				canvas.width = Math.ceil(canvasWidth.value * dpr.value)
+				canvas.height = Math.ceil(canvasHeight.value * dpr.value)
+				ctx.value = context2d
+				// #ifdef APP-HARMONY
+				// Wait until the native Canvas has produced its first frame; otherwise
+				// synchronous background/text drawing is discarded while later image
+				// callbacks happen to render correctly.
+				context.requestAnimationFrame((_time: number) => {
+					resolve()
+				})
+				// #endif
+				// #ifndef APP-HARMONY
+				resolve()
+				// #endif
+			},
+			fail: (error: UniError) => {
+				reject(error)
+			}
+		})
+	})
+}
+
+let exportImage = (): Promise<UTSJSONObject> => {
+	return new Promise((resolve, reject) => {
+		reject(new Error('exportImage is not ready'))
+	})
+}
+
+let generatePoster = (): Promise<string> => {
+	return new Promise((resolve, reject) => {
+		reject(new Error('generatePoster is not ready'))
+	})
+}
+
+let drawPoster = (): Promise<void> => {
+	return new Promise((resolve, reject) => {
+		reject(new Error('drawPoster is not ready'))
+	})
+}
+
+let drawPosterSync = (): Promise<void> => {
+	return new Promise((resolve, reject) => {
+		reject(new Error('drawPosterSync is not ready'))
+	})
+}
+
+let drawItems = (_views: Array<any>, _index: number): Promise<void> => {
+	return new Promise((resolve, reject) => {
+		reject(new Error('drawItems is not ready'))
+	})
+}
+
+let drawItem = (_item: PosterItem): Promise<void> => {
+	return new Promise((resolve, reject) => {
+		reject(new Error('drawItem is not ready'))
+	})
+}
+
+let preloadPosterImage = (_item: PosterItem): Promise<void> => {
+	return new Promise((resolve, reject) => {
+		reject(new Error('preloadPosterImage is not ready'))
+	})
+}
+
+let preloadPosterImages = (_views: Array<any>, _index: number): Promise<void> => {
+	return new Promise((resolve, reject) => {
+		reject(new Error('preloadPosterImages is not ready'))
+	})
+}
+
+let drawView = (_item: PosterItem): void => {}
+let drawText = (_item: PosterItem): void => {}
+let wrapText = (_text: string, _maxWidth: number, _maxLines: number, _fontSize: number): Array<string> => [] as Array<string>
+
+let drawImageBox = (_item: PosterItem): Promise<void> => {
+	return new Promise((resolve, reject) => {
+		reject(new Error('drawImageBox is not ready'))
+	})
+}
+
+let drawImageFallback = (_x: number, _y: number, _width: number, _height: number, _radius: number): void => {}
+let drawQrCode = (_item: PosterItem): void => {}
+let fillBackground = (_value: any | null, _x: number, _y: number, _width: number, _height: number, _radius: number, _fallback: string): void => {}
+let fillGradient = (_background: string, _x: number, _y: number, _width: number, _height: number, _radius: number, _fallback: string): void => {}
+let fillCanvasGradient = (_background: string, _x: number, _y: number, _width: number, _height: number, _radius: number): boolean => false
+let fillSteppedLinearGradient = (_background: string, _x: number, _y: number, _width: number, _height: number, _radius: number, _fallback: string): void => {}
+let fillSteppedRadialGradient = (_background: string, _x: number, _y: number, _width: number, _height: number, _radius: number, _fallback: string): void => {}
+let gradientColorAt = (_stops: Array<GradientStop>, _progress: number, fallback: string): string => fallback
+let clipRadiusMask = (_x: number, _y: number, _width: number, _height: number, _radius: number): void => {}
+let fillRoundRect = (_x: number, _y: number, _width: number, _height: number, _radius: number): void => {}
+
+exportImage = (): Promise<UTSJSONObject> => {
+	return new Promise((resolve, reject) => {
+		generatePoster().then((path: string) => {
+			const result = {
+				width: canvasWidth.value,
+				height: canvasHeight.value,
+				path
+			} as UTSJSONObject
+			emit('export', result)
+			resolve(result)
+		}).catch((error: any | null) => {
+			emit('error', error)
+			reject(error)
+		})
+	})
+}
+
+function getPosterImageAsset(src: string): PosterImageAsset | null {
+	for (let i = 0; i < posterImageAssets.length; i++) {
+		if (posterImageAssets[i].src == src) {
+			return posterImageAssets[i]
+		}
+	}
+	return null
+}
+
+preloadPosterImage = (item: PosterItem): Promise<void> => {
+	return new Promise((resolve) => {
+		if (item.src.length == 0 || getPosterImageAsset(item.src) != null) {
+			resolve()
+			return
+		}
+		const asset = {
+			src: item.src,
+			image: null,
+			failed: false
+		} as PosterImageAsset
+		posterImageAssets.push(asset)
+		const canvas = canvasContext.value
+		if (canvas == null) {
+			asset.failed = true
+			resolve()
+			return
+		}
+		uni.getImageInfo({
+			src: item.src,
+			success: (res: GetImageInfoSuccess) => {
+				const image = canvas.createImage()
+				image.onload = () => {
+					asset.image = image
+					resolve()
+				}
+				// #ifdef APP
+				image.onerror = () => {
+					asset.failed = true
+					resolve()
+				}
+				// #endif
+				// #ifndef APP
+				;(image as any).onerror = () => {
+					asset.failed = true
+					resolve()
+				}
+				// #endif
+				image.src = res.path
+			},
+			fail: () => {
+				asset.failed = true
+				resolve()
+			}
+		})
+	})
+}
+
+preloadPosterImages = (views: Array<any>, index: number): Promise<void> => {
+	return new Promise((resolve) => {
+		if (index >= views.length) {
+			resolve()
+			return
+		}
+		const item = createItem(views[index])
+		if (item.type == 'image') {
+			preloadPosterImage(item).then(() => {
+				preloadPosterImages(views, index + 1).then(() => {
+					resolve()
+				})
+			})
+			return
+		}
+		preloadPosterImages(views, index + 1).then(() => {
+			resolve()
+		})
+	})
+}
+
+generatePoster = (): Promise<string> => {
+	return new Promise((resolve, reject) => {
+		prepareSize()
+		showCanvas.value = true
+		nextTick(() => {
+			initCanvas().then(() => {
+				posterImageAssets = [] as Array<PosterImageAsset>
+				preloadPosterImages(getViews(), 0).then(() => {
+					drawPoster().then(() => {
+						const canvas = canvasContext.value
+						if (canvas == null) {
+							reject(new Error('Canvas is not ready'))
+							return
+						}
+						const dataUrl = canvas.toDataURL('image/png', 1)
+						showCanvas.value = false
+						resolve(dataUrl)
+					})
+				})
+			}).catch((error: any | null) => {
+				showCanvas.value = false
+				reject(error)
+			})
+		})
+	})
+}
+
+drawPoster = (): Promise<void> => {
+	return new Promise((resolve) => {
+		drawPosterSync().then(() => {
+			const context = ctx.value
+			if (context != null) {
+				context.draw()
+			}
+			resolve()
+		})
+	})
+}
+
+drawPosterSync = (): Promise<void> => {
+	return new Promise((resolve) => {
+		const context = ctx.value
+		if (context == null) {
+			resolve()
+			return
+		}
+		const css = getPosterCss()
+		context.clearRect(0, 0, scaleCanvasValue(canvasWidth.value), scaleCanvasValue(canvasHeight.value))
+		fillBackground(css['background'], 0, 0, canvasWidth.value, canvasHeight.value, 0, '#ffffff')
+		const views = getViews()
+		drawItems(views, 0).then(() => {
+			resolve()
+		})
+	})
+}
+
+drawItems = (views: Array<any>, index: number): Promise<void> => {
+	return new Promise((resolve) => {
+		if (index >= views.length) {
+			resolve()
+			return
+		}
+		drawItem(createItem(views[index])).then(() => {
+			drawItems(views, index + 1).then(() => {
+				resolve()
+			})
+		})
+	})
+}
+
+drawItem = (item: PosterItem): Promise<void> => {
+	return new Promise((resolve) => {
+		if (item.type == 'view') {
+			drawView(item)
+			resolve()
+		} else if (item.type == 'text') {
+			drawText(item)
+			resolve()
+		} else if (item.type == 'image') {
+			drawImageBox(item).then(() => {
+				resolve()
+			})
+		} else if (item.type == 'qrcode') {
+			drawQrCode(item)
+			resolve()
+		} else {
+			resolve()
+		}
+	})
+}
+
+drawView = (item: PosterItem): void => {
+	const context = ctx.value
+	if (context == null) {
+		return
+	}
+	const css = item.css
+	const x = numberValue(css['left'], 0)
+	const y = numberValue(css['top'], 0)
+	const width = numberValue(css['width'], 0)
+	const height = numberValue(css['height'], 0)
+	fillBackground(css['background'], x, y, width, height, numberValue(css['radius'], 0), '#ffffff')
+}
+
+drawText = (item: PosterItem): void => {
+	const context = ctx.value
+	if (context == null) {
+		return
+	}
+	const css = item.css
+	const x = numberValue(css['left'], 0)
+	const y = numberValue(css['top'], 0)
+	const width = numberValue(css['width'], canvasWidth.value - x)
+	const fontSize = numberValue(css['fontSize'], 14)
+	const lineHeight = numberValue(css['lineHeight'], fontSize + 6)
+	const lineClamp = numberValue(css['lineClamp'], 1)
+	context.fillStyle = normalizeCanvasColor(colorValue(css['color'], '#333333'))
+	context.font = stringValue(css['fontWeight']) == 'bold' ? 'bold ' + scaleCanvasValue(fontSize).toString() + 'px sans-serif' : scaleCanvasValue(fontSize).toString() + 'px sans-serif'
+	const lines = wrapText(item.text, width, lineClamp, fontSize)
+	for (let i = 0; i < lines.length; i++) {
+		context.fillText(lines[i], scaleCanvasValue(x), scaleCanvasValue(y + fontSize + i * lineHeight))
+	}
+}
+
+wrapText = (text: string, maxWidth: number, maxLines: number, fontSize: number): Array<string> => {
+	const context = ctx.value
+	const lines = [] as Array<string>
+	if (context == null || text.length == 0) {
+		return lines
+	}
+	let current = ''
+	for (let i = 0; i < text.length; i++) {
+		const next = current + text.substring(i, i + 1)
+		if (measuredTextWidth(context, next, fontSize) > maxWidth && current.length > 0) {
+			lines.push(current)
+			current = text.substring(i, i + 1)
+			if (lines.length >= maxLines) {
+				break
+			}
+		} else {
+			current = next
+		}
+	}
+	if (lines.length < maxLines && current.length > 0) {
+		lines.push(current)
+	}
+	if (lines.length == maxLines && text.length > lines.join('').length) {
+		let last = lines[maxLines - 1]
+		while (last.length > 0 && measuredTextWidth(context, last + '...', fontSize) > maxWidth) {
+			last = last.substring(0, last.length - 1)
+		}
+		lines[maxLines - 1] = last + '...'
+	}
+	return lines
+}
+
+drawImageBox = (item: PosterItem): Promise<void> => {
+	return new Promise((resolve) => {
+		const context = ctx.value
+		if (context == null) {
+			resolve()
+			return
+		}
+		const css = item.css
+		const x = numberValue(css['left'], 0)
+		const y = numberValue(css['top'], 0)
+		const width = numberValue(css['width'], 0)
+		const height = numberValue(css['height'], 0)
+		const asset = getPosterImageAsset(item.src)
+		if (asset == null || asset.failed || asset.image == null) {
+			drawImageFallback(x, y, width, height, numberValue(css['radius'], 0))
+			resolve()
+			return
+		}
+		context.drawImage(asset.image, scaleCanvasValue(x), scaleCanvasValue(y), scaleCanvasValue(width), scaleCanvasValue(height))
+		resolve()
+	})
+}
+
+drawImageFallback = (x: number, y: number, width: number, height: number, radius: number): void => {
+	const context = ctx.value
+	if (context == null) {
+		return
+	}
+	context.fillStyle = normalizeCanvasColor('#eef2f7')
+	fillRoundRect(x, y, width, height, radius)
+}
+
+drawQrCode = (item: PosterItem): void => {
+	const context = ctx.value
+	if (context == null) {
+		return
+	}
+	const css = item.css
+	const x = numberValue(css['left'], 0)
+	const y = numberValue(css['top'], 0)
+	const width = numberValue(css['width'], 0)
+	const height = numberValue(css['height'], width)
+	const value = item.text.length > 0 ? item.text : item.src
+	if (value.length == 0 || width <= 0 || height <= 0) {
+		drawImageFallback(x, y, width, height, numberValue(css['radius'], 0))
+		return
+	}
+	const foreground = colorValue(css['foreground'], '#000000')
+	const background = colorValue(css['background'], '#ffffff')
+	const pdground = colorValue(css['pdground'], foreground)
+	const level = numberValue(css['lv'], 3)
+	const count = getQrRenderCount(value, level)
+	const cells = createQrCells(value, foreground, background, pdground, level)
+	const cellSize = Math.min(width, height) / count
+	context.fillStyle = normalizeCanvasColor(background)
+	context.fillRect(scaleCanvasValue(x), scaleCanvasValue(y), scaleCanvasValue(width), scaleCanvasValue(height))
+	for (let row = 0; row < count; row++) {
+		for (let col = 0; col < count; col++) {
+			const index = row * count + col
+			if (index >= cells.length) continue
+			const cell = cells[index]
+			if ((cell['dark'] as boolean) != true) continue
+			context.fillStyle = normalizeCanvasColor(colorValue(cell['color'], foreground))
+			context.fillRect(scaleCanvasValue(x + col * cellSize), scaleCanvasValue(y + row * cellSize), scaleCanvasValue(cellSize + 0.5), scaleCanvasValue(cellSize + 0.5))
+		}
+	}
+}
+
+fillBackground = (value: any | null, x: number, y: number, width: number, height: number, radius: number, fallback: string): void => {
+	const context = ctx.value
+	if (context == null) {
+		return
+	}
+	const background = colorValue(value, fallback)
+	if (background.indexOf('gradient') >= 0) {
+		fillGradient(background, x, y, width, height, radius, fallback)
+		return
+	}
+	context.fillStyle = normalizeCanvasColor(background)
+	fillRoundRect(x, y, width, height, radius)
+}
+
+fillGradient = (background: string, x: number, y: number, width: number, height: number, radius: number, fallback: string): void => {
+	if (fillCanvasGradient(background, x, y, width, height, radius)) {
+		return
+	}
+	if (background.indexOf('radial-gradient') >= 0) {
+		fillSteppedRadialGradient(background, x, y, width, height, radius, fallback)
+		return
+	}
+	fillSteppedLinearGradient(background, x, y, width, height, radius, fallback)
+}
+
+fillCanvasGradient = (background: string, x: number, y: number, width: number, height: number, radius: number): boolean => {
+	const context = ctx.value
+	if (context == null) {
+		return false
+	}
+	const stops = parseGradientStops(background)
+	if (background.indexOf('radial-gradient') >= 0) {
+		const centerX = x + width / 2
+		const centerY = y + height / 2
+		const maxRadius = Math.max(width, height) / 2
+		const gradient = context.createRadialGradient(scaleCanvasValue(centerX), scaleCanvasValue(centerY), 0, scaleCanvasValue(centerX), scaleCanvasValue(centerY), scaleCanvasValue(maxRadius))
+		for (let i = 0; i < stops.length; i++) {
+			gradient.addColorStop(stops[i].offset, normalizeCanvasColor(stops[i].color))
+		}
+		context.fillStyle = gradient
+		fillRoundRect(x, y, width, height, radius)
+		return true
+	}
+	const angle = gradientAngle(background) % 360
+	let startX = x
+	let startY = y
+	let endX = x + width
+	let endY = y + height
+	if (angle == 0) {
+		startX = x
+		startY = y + height
+		endX = x
+		endY = y
+	} else if (angle == 90) {
+		startX = x
+		startY = y
+		endX = x + width
+		endY = y
+	} else if (angle == 180) {
+		startX = x
+		startY = y
+		endX = x
+		endY = y + height
+	} else if (angle == 270) {
+		startX = x + width
+		startY = y
+		endX = x
+		endY = y
+	}
+	const gradient = context.createLinearGradient(scaleCanvasValue(startX), scaleCanvasValue(startY), scaleCanvasValue(endX), scaleCanvasValue(endY))
+	for (let i = 0; i < stops.length; i++) {
+		gradient.addColorStop(stops[i].offset, normalizeCanvasColor(stops[i].color))
+	}
+	context.fillStyle = gradient
+	fillRoundRect(x, y, width, height, radius)
+	return true
+}
+
+fillSteppedLinearGradient = (background: string, x: number, y: number, width: number, height: number, radius: number, fallback: string): void => {
+	const context = ctx.value
+	if (context == null) {
+		return
+	}
+	const stops = parseGradientStops(background)
+	const angle = gradientAngle(background) % 360
+	const horizontal = angle == 90 || angle == 270
+	const steps = Math.max(1, Math.floor(horizontal ? width : height))
+	for (let i = 0; i < steps; i++) {
+		const rawProgress = steps <= 1 ? 0 : i / (steps - 1)
+		const progress = angle == 270 || angle == 0 ? 1 - rawProgress : rawProgress
+		context.fillStyle = normalizeCanvasColor(gradientColorAt(stops, progress, fallback))
+		if (horizontal) {
+			context.fillRect(scaleCanvasValue(x + i), scaleCanvasValue(y), scaleCanvasValue(1.5), scaleCanvasValue(height))
+		} else {
+			context.fillRect(scaleCanvasValue(x), scaleCanvasValue(y + i), scaleCanvasValue(width), scaleCanvasValue(1.5))
+		}
+	}
+	if (radius > 0) {
+		clipRadiusMask(x, y, width, height, radius)
+	}
+}
+
+fillSteppedRadialGradient = (background: string, x: number, y: number, width: number, height: number, radius: number, fallback: string): void => {
+	const context = ctx.value
+	if (context == null) {
+		return
+	}
+	const stops = parseGradientStops(background)
+	const centerX = x + width / 2
+	const centerY = y + height / 2
+	const maxRadius = Math.max(width, height) / 2
+	const steps = Math.max(1, Math.floor(maxRadius))
+	for (let i = steps; i >= 0; i--) {
+		const progress = steps <= 0 ? 0 : i / steps
+		context.fillStyle = normalizeCanvasColor(gradientColorAt(stops, progress, fallback))
+		context.beginPath()
+		context.arc(scaleCanvasValue(centerX), scaleCanvasValue(centerY), scaleCanvasValue(i), 0, Math.PI * 2)
+		context.closePath()
+		context.fill()
+	}
+	if (radius > 0) {
+		clipRadiusMask(x, y, width, height, radius)
+	}
+}
+
+gradientColorAt = (stops: Array<GradientStop>, progress: number, fallback: string): string => {
+	if (stops.length == 0) {
+		return fallback
+	}
+	let current = stops[0]
+	for (let i = 1; i < stops.length; i++) {
+		if (progress <= stops[i].offset) {
+			const next = stops[i]
+			const span = next.offset - current.offset
+			const ratio = span <= 0 ? 0 : (progress - current.offset) / span
+			return ratio < 0.5 ? current.color : next.color
+		}
+		current = stops[i]
+	}
+	return current.color
+}
+
+clipRadiusMask = (x: number, y: number, width: number, height: number, radius: number): void => {
+	const context = ctx.value
+	if (context == null) {
+		return
+	}
+	context.save()
+	context.globalCompositeOperation = 'destination-in'
+	context.fillStyle = normalizeCanvasColor('#000000')
+	fillRoundRect(x, y, width, height, radius)
+	context.restore()
+	context.globalCompositeOperation = 'source-over'
+}
+
+fillRoundRect = (x: number, y: number, width: number, height: number, radius: number): void => {
+	const context = ctx.value
+	if (context == null) {
+		return
+	}
+	if (radius <= 0) {
+		context.fillRect(scaleCanvasValue(x), scaleCanvasValue(y), scaleCanvasValue(width), scaleCanvasValue(height))
+		return
+	}
+	const r = Math.min(radius, Math.min(width, height) / 2)
+	context.beginPath()
+	context.moveTo(scaleCanvasValue(x + r), scaleCanvasValue(y))
+	context.lineTo(scaleCanvasValue(x + width - r), scaleCanvasValue(y))
+	context.quadraticCurveTo(scaleCanvasValue(x + width), scaleCanvasValue(y), scaleCanvasValue(x + width), scaleCanvasValue(y + r))
+	context.lineTo(scaleCanvasValue(x + width), scaleCanvasValue(y + height - r))
+	context.quadraticCurveTo(scaleCanvasValue(x + width), scaleCanvasValue(y + height), scaleCanvasValue(x + width - r), scaleCanvasValue(y + height))
+	context.lineTo(scaleCanvasValue(x + r), scaleCanvasValue(y + height))
+	context.quadraticCurveTo(scaleCanvasValue(x), scaleCanvasValue(y + height), scaleCanvasValue(x), scaleCanvasValue(y + height - r))
+	context.lineTo(scaleCanvasValue(x), scaleCanvasValue(y + r))
+	context.quadraticCurveTo(scaleCanvasValue(x), scaleCanvasValue(y), scaleCanvasValue(x + r), scaleCanvasValue(y))
+	context.closePath()
+	context.fill()
+}
+
+defineExpose({
+	canvasId,
+	showCanvas,
+	canvasWidth,
+	canvasHeight,
+	canvasContext,
+	ctx,
+	canvasStyle,
+	getJson,
+	getPosterCss,
+	getViews,
+	prepareSize,
+	initCanvas,
+	exportImage,
+	generatePoster,
+	drawPoster,
+	drawPosterSync,
+	drawItems,
+	drawItem,
+	drawView,
+	drawText,
+	wrapText,
+	drawImageBox,
+	drawImageFallback,
+	drawQrCode,
+	fillBackground,
+	fillGradient,
+	fillCanvasGradient,
+	fillSteppedLinearGradient,
+	fillSteppedRadialGradient,
+	gradientColorAt,
+	clipRadiusMask,
+	fillRoundRect
+})
+</script>
+
+<style lang="scss" scoped>
+	.up-poster {
+		position: fixed;
+		left: -9999px;
+		top: -9999px;
+		width: 1px;
+		height: 1px;
+		overflow: hidden;
+	}
+
+	.up-poster__canvas {
+		display: flex;
+	}
+</style>