diff --git a/index.html b/index.html
index e608ee1..e8f83b8 100644
--- a/index.html
+++ b/index.html
@@ -10,8 +10,9 @@
-
-
+
+
+
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;
}