From 2843424c5aae1c577ad954092bdfbefe4d54d3a7 Mon Sep 17 00:00:00 2001
From: Zhukj <3262118957>
Date: Fri, 17 Apr 2026 17:39:10 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E6=96=87=E6=9C=AC=E5=8A=9F=E8=83=BD=EF=BC=8C=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E5=A4=9A=E6=96=87=E6=9C=AC=EF=BC=9Bfix:=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E4=BF=9D=E5=AD=98=E9=A2=84=E8=A7=88=E5=A4=B1=E8=B4=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html   |  5 +++--
 js/script.js | 43 ++++++++++++++++++++++++++++++++++++++-----
 2 files changed, 41 insertions(+), 7 deletions(-)

diff --git a/index.html b/index.html
index e608ee1..e8f83b8 100644
--- a/index.html
+++ b/index.html
@@ -10,8 +10,9 @@
     <div class="app">
         <!-- 顶部工具栏 -->
         <div class="toolbar">
-            <button class="btn" id="addImageBtn">添加图片</button>
-            <button class="btn" id="addOverlayBtn">层叠图</button>
+            <button class="btn" id="addImageBtn">添加背景图</button>
+            <button class="btn" id="addOverlayBtn">添加层叠图</button>
+            <button class="btn" id="addTextBtn">添加文本</button>
             <button class="btn btn-primary" id="saveBtn">保存/预览</button>
         </div>
 
diff --git a/js/script.js b/js/script.js
index 7f76e53..a5b4d8e 100644
--- a/js/script.js
+++ b/js/script.js
@@ -3,6 +3,7 @@
     const fileInput = document.getElementById('fileInput');
     const addImageBtn = document.getElementById('addImageBtn');
     const addOverlayBtn = document.getElementById('addOverlayBtn');
+    const addTextBtn = document.getElementById('addTextBtn');
     const saveBtn = document.getElementById('saveBtn');
     const imageContainer = document.getElementById('imageContainer');
     const bgLayer = document.getElementById('bgLayer');
@@ -64,6 +65,11 @@
             overlayInput.value = '';
         });
 
+        // 添加文本按钮
+        addTextBtn.addEventListener('click', () => {
+            addTextInput();
+        });
+
         // 文件选择
         fileInput.addEventListener('change', (e) => {
             const file = e.target.files[0];
@@ -179,6 +185,30 @@
         reader.readAsDataURL(file);
     }
 
+    // 添加文本输入框
+    function addTextInput() {
+        const container = imageContainer;
+        const containerWidth = container.clientWidth;
+        const containerHeight = container.clientHeight;
+
+        const textEl = document.createElement('div');
+        textEl.className = 'text-input';
+        textEl.contentEditable = 'false';
+        textEl.textContent = '新文本';
+
+        const left = Math.random() * (containerWidth * 0.6) + containerWidth * 0.1;
+        const top = Math.random() * (containerHeight * 0.6) + containerHeight * 0.1;
+        textEl.style.left = (left / containerWidth * 100) + '%';
+        textEl.style.top = (top / containerHeight * 100) + '%';
+
+        const inputLayer = container.querySelector('.preview-input-layer');
+        inputLayer.appendChild(textEl);
+
+        initInput(textEl);
+
+        selectInput(textEl);
+    }
+
     // 加载层叠图
     function loadOverlayImage(file) {
         const reader = new FileReader();
@@ -1543,9 +1573,10 @@
     async function generateCanvas() {
         const canvas = exportCanvas;
         const ctx = canvas.getContext('2d');
+        const container = imageContainer;
 
-        const containerWidth = imageContainer.clientWidth;
-        const containerHeight = imageContainer.clientHeight;
+        const containerWidth = container.clientWidth;
+        const containerHeight = container.clientHeight;
 
         canvas.width = containerWidth;
         canvas.height = containerHeight;
@@ -1562,9 +1593,11 @@
         // 绘制层叠图（等待图片加载完成）
         await drawOverlayImages(ctx);
 
-        // 绘制文字
-        drawTextOnCanvas(ctx, input1);
-        drawTextOnCanvas(ctx, input2);
+        // 绘制文字（动态获取所有文本输入框）
+        const textInputs = container.querySelectorAll('.preview-input-layer .text-input');
+        textInputs.forEach(textInput => {
+            drawTextOnCanvas(ctx, textInput);
+        });
 
         return canvas;
     }