GenPoster

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

特性

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

Demo

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 (
        <>
            <button
                onClick={() => {
                    canvas.current.getImagePoster().then(({ url, file, release }) => {
                        setSrc(url)
                    })
                }}
            >
                Get Image
            </button>
            <button
                onClick={() => {
                    canvas.current.getBase64Poster().then(setBase64)
                }}
            >
                Get Base64
            </button>
            <button
                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
            </button>
            <button
                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
            </button>
            <button
                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
            </button>
            <button
                onClick={() => {
                    canvas.current.addLine({ x1: 100, y1: 300, x2: 400, y2: 300, color: 'green', width: 1 })
                }}
            >
                Add Line
            </button>
            <button
                onClick={() => {
                    canvas.current.addRect({
                        x: 100,
                        y: 100,
                        width: 200,
                        height: 200,
                        radius: 10,
                        color: 'orange',
                        strokeColor: 'yellow',
                        strokeWidth: 5,
                    })
                }}
            >
                Add Rect
            </button>
            <button
                onClick={() => {
                    canvas.current.addCircle({ x: 300, y: 300, radius: 50, strokeColor: 'pink', strokeWidth: 1 })
                }}
            >
                Add Circle
            </button>
            <button
                onClick={() => {
                    canvas.current.addEllipse({
                        x: 300,
                        y: 300,
                        radiusX: 50,
                        radiusY: 20,
                        color: 'purple',
                        strokeColor: 'blue',
                        strokeWidth: 4,
                    })
                }}
            >
                Add Ellipse
            </button>
            <br />
            <br />
            <img src={src} alt='' style={{ width: '40%' }} />
            <br />
            <br />
            <img src={base64} alt='' style={{ width: '40%' }} />
        </>
    )
}

注意事项

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

     Access-Control-Allow-Origin: *

     或者指定具体的域名：

     Access-Control-Allow-Origin: https://yourdomain.com