WeWork/invitation-maker
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 添加图片编辑器，与文本共用工具栏，选中切换编辑面板，支持图片透明度调节

Browse Source
This commit is contained in:
Zhukj
2026-04-18 14:55:08 +08:00
parent b69bfae1bb
commit 22ba7dd6a3
4 changed files with 103 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
index.html
View File

@@ -16,34 +16,44 @@
<button class="btn btn-primary" id="saveBtn">保存/预览</button>
</div>
<!-- 文本编辑器工具栏 -->
<div class="text-editor-toolbar" id="textEditorToolbar">
<button class="toolbar-btn" id="boldBtn" title="加粗">B</button>
<button class="toolbar-btn italic" id="italicBtn" title="斜体">I</button>
<div class="toolbar-divider"></div>
<label class="toolbar-label">
<span>颜色</span>
<input type="color" id="colorPicker" value="#000000">
</label>
<div class="toolbar-divider"></div>
<label class="toolbar-label">
<span>字体</span>
<select id="fontPicker">
<option value="Microsoft YaHei">雅黑</option>
<option value="SimHei">黑体</option>
<option value="SimSun">宋体</option>
<option value="Arial">Arial</option>
</select>
</label>
<div class="toolbar-divider"></div>
<label class="toolbar-label">
<span>字号</span>
<div class="roller-picker" id="fontSizePicker">
<div class="roller-arrow roller-up">▲</div>
<div class="roller-value">16</div>
<div class="roller-arrow roller-down">▼</div>
</div>
</label>
<!-- 编辑器工具栏（文本/图片共用） -->
<div class="editor-toolbar" id="editorToolbar">
<!-- 文本编辑工具 -->
<div class="toolbar-group text-tools" id="textTools">
<button class="toolbar-btn" id="boldBtn" title="加粗">B</button>
<button class="toolbar-btn italic" id="italicBtn" title="斜体">I</button>
<div class="toolbar-divider"></div>
<label class="toolbar-label">
<span>颜色</span>
<input type="color" id="colorPicker" value="#000000">
</label>
<div class="toolbar-divider"></div>
<label class="toolbar-label">
<span>字体</span>
<select id="fontPicker">
<option value="Microsoft YaHei">雅黑</option>
<option value="SimHei">黑体</option>
<option value="SimSun">宋体</option>
<option value="Arial">Arial</option>
</select>
</label>
<div class="toolbar-divider"></div>
<label class="toolbar-label">
<span>字号</span>
<div class="roller-picker" id="fontSizePicker">
<div class="roller-arrow roller-up">▲</div>
<div class="roller-value">16</div>
<div class="roller-arrow roller-down">▼</div>
</div>
</label>
</div>
<!-- 图片编辑工具 -->
<div class="toolbar-group image-tools" id="imageTools">
<label class="toolbar-label">
<span>透明度</span>
<input type="range" id="opacitySlider" min="0" max="100" value="100" class="opacity-slider">
</label>
</div>
</div>
<!-- 图片展示区 -->