-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
186 lines (182 loc) · 10.8 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text2Img</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&family=Noto+Serif+SC:wght@400;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Zhi+Mang+Xing&family=ZCOOL+XiaoWei&family=ZCOOL+QingKe+HuangYou&family=ZCOOL+KuaiLe&family=Long+Cang&family=Liu+Jian+Mao+Cao&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Open+Sans:wght@400;700&family=Lato:wght@400;700&family=Montserrat:wght@400;700&family=Raleway:wght@400;700&family=Playfair+Display:wght@400;700&family=Source+Sans+Pro:wght@400;700&family=Merriweather:wght@400;700&family=Ubuntu:wght@400;700&family=Dancing+Script&family=Pacifico&family=Shadows+Into+Light&family=Indie+Flower&family=Great+Vibes&family=Sacramento&display=swap" rel="stylesheet">
</head>
<body>
<div class="main-container">
<div class="area2">
<div class="area3">
<textarea id="text-input" placeholder="输入文本..."></textarea>
<button id="generate-btn">生成图片</button>
</div>
<div class="area1">
<div class="control-group">
<label for="font-size">文字大小:</label>
<input type="number" id="font-size" value="4">
</div>
<div class="control-group">
<label for="font-family">字体:</label>
<select id="font-family">
<!-- 中文字体 -->
<optgroup label="中文字体">
<option value="SimSun">宋体</option>
<option value="SimHei">黑体</option>
<option value="Microsoft YaHei">微软雅黑</option>
<option value="KaiTi">楷体</option>
<option value="FangSong">仿宋</option>
<option value="NSimSun">新宋体</option>
<option value="PMingLiU">新细明体</option>
<option value="DFKai-SB">标楷体</option>
<option value="LiSu">隶书</option>
<option value="YouYuan">幼圆</option>
<option value="STXihei">华文细黑</option>
<option value="STKaiti">华文楷体</option>
<option value="STSong">华文宋体</option>
<option value="STZhongsong">华文中宋</option>
<option value="STFangsong">华文仿宋</option>
<option value="FZShuTi">方正舒体</option>
<option value="FZYaoti">方正姚体</option>
</optgroup>
<!-- Google Fonts 中文 -->
<optgroup label="Google中文字体">
<option value="'Noto Sans SC', sans-serif">Noto Sans SC</option>
<option value="'Noto Serif SC', serif">Noto Serif SC</option>
<option value="'Ma Shan Zheng', cursive">马善政书法</option>
<option value="'Zhi Mang Xing', cursive">智慧体</option>
<option value="'ZCOOL XiaoWei', serif">站酷小薇</option>
<option value="'ZCOOL QingKe HuangYou', cursive">站酷庆科黄油体</option>
<option value="'ZCOOL KuaiLe', cursive">站酷快乐体</option>
<option value="'Long Cang', cursive">龙藏体</option>
<option value="'Liu Jian Mao Cao', cursive">柳建毛草</option>
</optgroup>
<!-- 英文字体 -->
<optgroup label="英文字体">
<option value="Arial">Arial</option>
<option value="Helvetica">Helvetica</option>
<option value="'Times New Roman'">Times New Roman</option>
<option value="Georgia">Georgia</option>
<option value="'Courier New'">Courier New</option>
<option value="Verdana">Verdana</option>
<option value="Impact">Impact</option>
<option value="'Arial Black'">Arial Black</option>
<option value="'Trebuchet MS'">Trebuchet MS</option>
<option value="'Palatino Linotype'">Palatino Linotype</option>
<option value="Tahoma">Tahoma</option>
<option value="'Century Gothic'">Century Gothic</option>
</optgroup>
<!-- Google Fonts 英文 -->
<optgroup label="Google英文字体">
<option value="'Roboto', sans-serif">Roboto</option>
<option value="'Open Sans', sans-serif">Open Sans</option>
<option value="'Lato', sans-serif">Lato</option>
<option value="'Montserrat', sans-serif">Montserrat</option>
<option value="'Raleway', sans-serif">Raleway</option>
<option value="'Playfair Display', serif">Playfair Display</option>
<option value="'Source Sans Pro', sans-serif">Source Sans Pro</option>
<option value="'Merriweather', serif">Merriweather</option>
<option value="'Ubuntu', sans-serif">Ubuntu</option>
<option value="'Dancing Script', cursive">Dancing Script</option>
<option value="'Pacifico', cursive">Pacifico</option>
<option value="'Shadows Into Light', cursive">Shadows Into Light</option>
<option value="'Indie Flower', cursive">Indie Flower</option>
<option value="'Great Vibes', cursive">Great Vibes</option>
<option value="'Sacramento', cursive">Sacramento</option>
</optgroup>
</select>
</div>
<div class="control-group">
<label for="color">文字颜色:</label>
<input type="color" id="color" value="#000000">
</div>
<div class="control-group">
<label for="line-spacing">行间距:</label>
<input type="number" id="line-spacing" value="1.2" step="0.1" min="0.5" max="3">
</div>
<div class="control-group">
<label for="bg-color-start">底色渐变起始:</label>
<input type="color" id="bg-color-start" value="#ffffff">
</div>
<div class="control-group">
<label for="bg-color-end">底色渐变结束:</label>
<input type="color" id="bg-color-end" value="#ffffff">
</div>
<div class="control-group">
<label for="gradient-angle">渐变角度:</label>
<input type="number" id="gradient-angle" value="0" min="0" max="360">
</div>
<div class="control-group">
<label for="bg-opacity">背景透明度:</label>
<div class="input-with-unit">
<input type="number" id="bg-opacity" value="100" min="0" max="100">
</div>
</div>
<div class="control-group">
<label for="padding">边距:</label>
<input type="number" id="padding" value="1">
</div>
<div class="control-group">
<label for="max-chars-per-line">每行最大字符数:</label>
<input type="number" id="max-chars-per-line" value="50">
</div>
<div class="control-group">
<label for="square-img">正方形图:</label>
<input type="checkbox" id="square-img">
</div>
<div class="control-group">
<label for="filename">文件名:</label>
<input type="text" id="filename" value="text2img">
</div>
<div class="control-group">
<label for="bg-image">背景图片:</label>
<input type="file" id="bg-image" accept="image/*">
</div>
<div class="control-group">
<label for="bg-fit">背景适配:</label>
<select id="bg-fit">
<option value="cover">填充(cover)</option>
<option value="contain">适应(contain)</option>
<option value="stretch">拉伸(stretch)</option>
<option value="tile">平铺(tile)</option>
</select>
</div>
<div class="control-group">
<button id="clear-bg" class="small-btn">清除背景图</button>
</div>
</div>
</div>
<div class="area5">
<div class="preview-area">
<canvas id="canvas"></canvas>
</div>
<div class="area6">
<div class="button-group">
<button id="upload-btn">上传到图床</button>
<button id="download-btn">下载图片</button>
</div>
<div class="link-group">
<input type="text" id="link" placeholder="图片链接" readonly onclick="copyToClipboard('link')">
</div>
<div class="link-group">
<input type="text" id="markdown-link" placeholder="Markdown格式链接" readonly onclick="copyToClipboard('markdown-link')">
</div>
<div class="link-group">
<input type="text" id="html-link" placeholder="HTML格式链接" readonly onclick="copyToClipboard('html-link')">
</div>
</div>
</div>
</div>
<footer>
<a href="https://github.com/bestZwei/text2img" target="_blank">Github-Text2Img</a>
</footer>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</body>
</html>