GenPoster

一个简单易用的海报生成工具，支持自定义文本、图片和布局。

特性

- 🎨 支持自定义画布大小和背景
- 📝 支持添加文本元素（可自定义字体、大小、颜色等）
- 🖼️ 支持添加图片元素
- 📐 灵活的定位系统
- 🎯 支持导出为图片格式

Demo

``javascript
import { GenPoster } from 'gen-poster'
import { useRef, useState } from 'react'
const img = 'xxx'
const img2 = 'xxx2'
export default function App() {
const canvas = useRef(new GenPoster({ background: 'red' }))
const [src, setSrc] = useState('')
const [base64, setBase64] = useState('')

return (
<>
onClick={() => {
canvas.current.getImagePoster().then(({ url, file, release }) => {
setSrc(url)
})
}}
>
Get Image

onClick={() => {
canvas.current.getBase64Poster().then(setBase64)
}}
>
Get Base64

onClick={async () => {
const response = await canvas.current.getImageInfo(img)
if (!response) return false
const { ratio } = response
console.log('🚀 ~ onClick={ ~ ratio:', ratio)
await canvas.current.addImage(img, { x: 0, y: 0, width: 300, height: 300 / ratio, radius: 80 }).then((res) => {
console.log(res)
})
}}
>
Add Image1

onClick={async () => {
const response = await canvas.current.getImageInfo(img2)
if (!response) return false
const { ratio } = response
console.log('🚀 ~ onClick={ ~ ratio:', ratio)
await canvas.current.addImage(img2, { x: 0, y: 0, width: 200, height: 200 / ratio, radius: 100 }).then((res) => {
console.log(res)
})
}}
>
Add Image2

onClick={() => {
canvas.current.addText(
'Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
{ x: 100, y: 400, size: 40, color: 'blue' }
)
}}
>
Add Text

onClick={() => {
canvas.current.addLine({ x1: 100, y1: 300, x2: 400, y2: 300, color: 'green', width: 1 })
}}
>
Add Line

onClick={() => {
canvas.current.addRect({
x: 100,
y: 100,
width: 200,
height: 200,
radius: 10,
color: 'orange',
strokeColor: 'yellow',
strokeWidth: 5,
})
}}
>
Add Rect

onClick={() => {
canvas.current.addCircle({ x: 300, y: 300, radius: 50, strokeColor: 'pink', strokeWidth: 1 })
}}
>
Add Circle

onClick={() => {
canvas.current.addEllipse({
x: 300,
y: 300,
radiusX: 50,
radiusY: 20,
color: 'purple',
strokeColor: 'blue',
strokeWidth: 4,
})
}}
>
Add Ellipse












)
}
`

注意事项

1. 确保所有图片资源可以正常访问
2. 坐标系原点(0,0)位于画布左上角
3. 图片加载可能需要一定时间，建议添加适当的加载提示
4. 使用跨域图片时，需要确保：
- 图片服务器允许跨域访问（设置正确的 CORS 头）
- 图片 URL 必须支持 CORS
- 如果使用的是自己的服务器，需要设置适当的 CORS 头：
`
Access-Control-Allow-Origin: *
`
或者指定具体的域名：
`
Access-Control-Allow-Origin: https://yourdomain.com
``