Quick Started

<div class="text-center mt-4">
    <canvas id="posterCanvas" class="w-100 h-auto d-none" width="800"></canvas>
</div>
<script>
    const canvas = new fabric.StaticCanvas('posterCanvas'); // 初始化 Fabric.js 画布
    // 将二维码合成到画布
    const qrImage = new Image();
    qrImage.src = img_url;
    qrImage.onload = () => {
        const subtitle = document.getElementById('subtitle').value.trim() || "XXXX";
        fabricSubtitle = new fabric.Text(subtitle, {
            left: 210,
            top: 625,
            fontSize: 40,
            fill: 'grey',
        })

        fabricSubtitle.left = canvas.width / 2 - fabricSubtitle.width / 2;
        canvas.add(fabricSubtitle);

        qrFabricImg = new fabric.FabricImage(qrImage, {
            left: 210, // 二维码位置 (根据模板调整)
            top: 680,
            scaleX: 1,
            scaleY: 1,
            selectable: false,
        });
        canvas.add(qrFabricImg);
    };
    canvas.requestRenderAll();
</script>