diff --git a/js/script.js b/js/script.js index 35fb212..89949c5 100644 --- a/js/script.js +++ b/js/script.js @@ -237,11 +237,56 @@ bgOpacitySlider.value = 100; bgOpacityValue.textContent = '100%'; updateBgImage(); + + // 创建初始文本输入框 + createInitialTextInputs(); }; img.src = e.target.result; }; reader.readAsDataURL(file); } + + // 创建初始文本输入框 + function createInitialTextInputs() { + const container = imageContainer; + const containerWidth = container.clientWidth; + const containerHeight = container.clientHeight; + + // 定义3个输入框的位置(像素值) + const inputs = [ + { left: 98, top: 232.945, text: '参会企业:' }, + { left: 98, top: 275.555, text: '姓名:' }, + { left: 98, top: 317.548, text: '编号:' } + ]; + + inputs.forEach((input, index) => { + const textEl = document.createElement('div'); + textEl.className = 'text-input'; + textEl.contentEditable = 'false'; + textEl.textContent = input.text; + + // 将像素位置转换为百分比 + const leftPercent = (input.left / containerWidth * 100); + const topPercent = (input.top / containerHeight * 100); + textEl.style.left = leftPercent + '%'; + textEl.style.top = topPercent + '%'; + + // 删除按钮 + const deleteBtn = document.createElement('button'); + deleteBtn.className = 'text-delete-btn'; + deleteBtn.innerHTML = '×'; + deleteBtn.addEventListener('click', (e) => { + e.stopPropagation(); + textEl.remove(); + }); + textEl.appendChild(deleteBtn); + + const inputLayer = container.querySelector('.preview-input-layer'); + inputLayer.appendChild(textEl); + + initInput(textEl); + }); + } // 添加文本输入框 function addTextInput() {