Spaces:
Running
on
CPU Upgrade
Running
on
CPU Upgrade
File size: 1,946 Bytes
2cae2a9 deff001 2cae2a9 deff001 2cae2a9 deff001 2cae2a9 deff001 2cae2a9 deff001 2cae2a9 deff001 2cae2a9 deff001 2cae2a9 deff001 2cae2a9 deff001 2cae2a9 deff001 2cae2a9 deff001 2cae2a9 deff001 2cae2a9 deff001 2cae2a9 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 |
import { TextOverlayFont, TextOverlayFontWeight, TextOverlayPosition, TextOverlayStyle, getCssStyle } from "../utils/getCssStyle.mts"
import { htmlToBase64Png } from "../converters/htmlToBase64Png.mts"
// generate a PNG overlay using HTML
// most sizes are in percentage of the image height
export async function createTextOverlayImage({
text = "",
textStyle = "outline",
fontFamily = "Montserrat",
// the unit is vh (so `fontSize: 4` = 4% of the window height)
fontSize = 3,
fontWeight = 600,
horizontalPosition = "center",
verticalPosition = "end",
rotation = 0,
px = 10,
py = 10,
width = 1024,
height = 576
}: {
text?: string
// pre-defined text styling, can be: outline or highlight
textStyle?: TextOverlayStyle
fontFamily?: TextOverlayFont
// font size, in % of the video height
fontSize?: number
// font weight, can be one of: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
fontWeight?: TextOverlayFontWeight
// start, center or end
horizontalPosition?: TextOverlayPosition
// start, center or end
verticalPosition?: TextOverlayPosition
rotation?: number
// horizontal padding - yes the unit is in vh, *not* vw (so `px: 8` = 8% of the window height)
px?: number
// vertical padding - the unit is in vh (so `py: 8` = 8% of the window height)
py?: number
width?: number
height?: number
}): Promise<{
filePath: string
buffer: Buffer
}> {
const html = `<html>
<head>${getCssStyle({
fontFamily,
fontSize,
fontWeight: 600,
horizontalPosition,
verticalPosition,
px,
py,
})}</head>
<body>
<!-- main content block (will be center in the middle of the screen) -->
<div class="content">
<!-- main line of text -->
<p class="${textStyle}">
${text}
</p>
</div>
</body>
</html>`
const result = await htmlToBase64Png({
html,
width,
height,
})
return result;
}; |