nv-img-barcode-bw 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/DEPS/html2canvas.min.js +20 -0
- package/DEPS/jsbarcode.min.js +2 -0
- package/DEPS/zxing.js +1 -0
- package/DIST/nv-img-barcode-bw.full.js +3173 -0
- package/DIST/nv-img-barcode-bw.js +265 -0
- package/TEST/api.html +1132 -0
- package/TEST/code128-VS-ean128.html +501 -0
- package/TEST/gs1-VS-nongs1.html +208 -0
- package/TEST/index.html +746 -0
- package/TEST/tst.html +950 -0
- package/TOOL/api.tmpl.html +867 -0
- package/TOOL/cli-creat-dist.js +5 -0
- package/TOOL/cli-creat-html.js +13 -0
- package/TOOL/index.tmpl.html +481 -0
- package/cfg.js +56 -0
- package/com.sh +5 -0
- package/css.js +170 -0
- package/decd.js +270 -0
- package/eng.js +589 -0
- package/index.js +366 -0
- package/package.json +17 -0
- package/ui.js +36 -0
|
@@ -0,0 +1,867 @@
|
|
|
1
|
+
|
|
2
|
+
<!DOCTYPE html>
|
|
3
|
+
<html lang="zh-CN">
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8">
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
+
<title>条形码工具函数测试</title>
|
|
8
|
+
<style>
|
|
9
|
+
* {
|
|
10
|
+
margin: 0;
|
|
11
|
+
padding: 0;
|
|
12
|
+
box-sizing: border-box;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
body {
|
|
16
|
+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
17
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
18
|
+
min-height: 100vh;
|
|
19
|
+
padding: 20px;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.container {
|
|
23
|
+
max-width: 1200px;
|
|
24
|
+
margin: 0 auto;
|
|
25
|
+
background: white;
|
|
26
|
+
padding: 40px;
|
|
27
|
+
border-radius: 20px;
|
|
28
|
+
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
header {
|
|
32
|
+
text-align: center;
|
|
33
|
+
margin-bottom: 40px;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
h1 {
|
|
37
|
+
color: #333;
|
|
38
|
+
font-size: 2.5rem;
|
|
39
|
+
margin-bottom: 10px;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.subtitle {
|
|
43
|
+
color: #666;
|
|
44
|
+
font-size: 1.1rem;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.section {
|
|
48
|
+
margin-bottom: 40px;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.section-title {
|
|
52
|
+
color: #4a5568;
|
|
53
|
+
margin-bottom: 20px;
|
|
54
|
+
padding-bottom: 10px;
|
|
55
|
+
border-bottom: 2px solid #667eea;
|
|
56
|
+
font-size: 1.8rem;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.input-form {
|
|
60
|
+
background: #f8f9fa;
|
|
61
|
+
padding: 25px;
|
|
62
|
+
border-radius: 12px;
|
|
63
|
+
margin-bottom: 20px;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.form-group {
|
|
67
|
+
margin-bottom: 20px;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.form-group label {
|
|
71
|
+
display: block;
|
|
72
|
+
margin-bottom: 8px;
|
|
73
|
+
font-weight: 600;
|
|
74
|
+
color: #4a5568;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.form-control {
|
|
78
|
+
width: 100%;
|
|
79
|
+
padding: 12px;
|
|
80
|
+
border: 2px solid #e2e8f0;
|
|
81
|
+
border-radius: 8px;
|
|
82
|
+
font-size: 16px;
|
|
83
|
+
box-sizing: border-box;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.form-control:focus {
|
|
87
|
+
outline: none;
|
|
88
|
+
border-color: #667eea;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.form-row {
|
|
92
|
+
display: grid;
|
|
93
|
+
grid-template-columns: 1fr 1fr;
|
|
94
|
+
gap: 20px;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.btn {
|
|
98
|
+
padding: 12px 24px;
|
|
99
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
100
|
+
color: white;
|
|
101
|
+
border: none;
|
|
102
|
+
border-radius: 8px;
|
|
103
|
+
font-size: 16px;
|
|
104
|
+
font-weight: 600;
|
|
105
|
+
cursor: pointer;
|
|
106
|
+
transition: all 0.3s;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.btn:hover {
|
|
110
|
+
transform: translateY(-2px);
|
|
111
|
+
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.btn-secondary {
|
|
115
|
+
background: linear-gradient(135deg, #4fd1c7 0%, #319795 100%);
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.btn-tertiary {
|
|
119
|
+
background: linear-gradient(135deg, #fc8181 0%, #c53030 100%);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.btn-full {
|
|
123
|
+
width: 100%;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.btn-group {
|
|
127
|
+
display: flex;
|
|
128
|
+
gap: 10px;
|
|
129
|
+
margin-top: 20px;
|
|
130
|
+
flex-wrap: wrap;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.result-section {
|
|
134
|
+
background: #f8f9fa;
|
|
135
|
+
padding: 25px;
|
|
136
|
+
border-radius: 12px;
|
|
137
|
+
margin-top: 20px;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.result-title {
|
|
141
|
+
color: #4a5568;
|
|
142
|
+
margin-bottom: 15px;
|
|
143
|
+
font-size: 1.2rem;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.result-content {
|
|
147
|
+
background: white;
|
|
148
|
+
padding: 20px;
|
|
149
|
+
border-radius: 8px;
|
|
150
|
+
border: 1px solid #e2e8f0;
|
|
151
|
+
max-height: 200px;
|
|
152
|
+
overflow-y: auto;
|
|
153
|
+
font-family: 'Courier New', monospace;
|
|
154
|
+
font-size: 14px;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
.image-preview {
|
|
158
|
+
text-align: center;
|
|
159
|
+
margin: 20px 0;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
.image-preview img {
|
|
163
|
+
max-width: 100%;
|
|
164
|
+
max-height: 200px;
|
|
165
|
+
border-radius: 8px;
|
|
166
|
+
border: 1px solid #e2e8f0;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
.code-block {
|
|
170
|
+
background: #f7fafc;
|
|
171
|
+
padding: 20px;
|
|
172
|
+
border-radius: 8px;
|
|
173
|
+
margin-top: 20px;
|
|
174
|
+
border: 1px solid #e2e8f0;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
.code-block pre {
|
|
178
|
+
margin: 0;
|
|
179
|
+
overflow-x: auto;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
.code-block code {
|
|
183
|
+
font-family: 'Courier New', monospace;
|
|
184
|
+
font-size: 14px;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
.function-grid {
|
|
188
|
+
display: grid;
|
|
189
|
+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
190
|
+
gap: 20px;
|
|
191
|
+
margin-top: 20px;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
.function-card {
|
|
195
|
+
background: #f8f9fa;
|
|
196
|
+
padding: 20px;
|
|
197
|
+
border-radius: 8px;
|
|
198
|
+
border: 1px solid #e2e8f0;
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
.function-name {
|
|
202
|
+
color: #667eea;
|
|
203
|
+
font-weight: 600;
|
|
204
|
+
margin-bottom: 10px;
|
|
205
|
+
font-family: 'Courier New', monospace;
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
.function-desc {
|
|
209
|
+
color: #718096;
|
|
210
|
+
font-size: 14px;
|
|
211
|
+
margin-bottom: 15px;
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
.function-params {
|
|
215
|
+
background: white;
|
|
216
|
+
padding: 10px;
|
|
217
|
+
border-radius: 6px;
|
|
218
|
+
margin-top: 10px;
|
|
219
|
+
font-size: 12px;
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
.function-params div {
|
|
223
|
+
margin: 5px 0;
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
.function-params .param-name {
|
|
227
|
+
color: #e53e3e;
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
.function-params .param-type {
|
|
231
|
+
color: #667eea;
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
.function-params .param-desc {
|
|
235
|
+
color: #718096;
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
.test-results {
|
|
239
|
+
display: grid;
|
|
240
|
+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
241
|
+
gap: 20px;
|
|
242
|
+
margin-top: 20px;
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
.test-result {
|
|
246
|
+
background: white;
|
|
247
|
+
padding: 20px;
|
|
248
|
+
border-radius: 8px;
|
|
249
|
+
border: 1px solid #e2e8f0;
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
.test-result-title {
|
|
253
|
+
color: #4a5568;
|
|
254
|
+
font-weight: 600;
|
|
255
|
+
margin-bottom: 10px;
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
.alert {
|
|
259
|
+
position: fixed;
|
|
260
|
+
top: 20px;
|
|
261
|
+
right: 20px;
|
|
262
|
+
padding: 12px 20px;
|
|
263
|
+
border-radius: 8px;
|
|
264
|
+
background: #38a169;
|
|
265
|
+
color: white;
|
|
266
|
+
font-weight: 500;
|
|
267
|
+
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
|
268
|
+
z-index: 1000;
|
|
269
|
+
display: none;
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
.alert.show {
|
|
273
|
+
display: block;
|
|
274
|
+
animation: slideIn 0.3s ease;
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
.alert.error {
|
|
278
|
+
background: #e53e3e;
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
.alert.warning {
|
|
282
|
+
background: #d69e2e;
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
@keyframes slideIn {
|
|
286
|
+
from { transform: translateX(100%); opacity: 0; }
|
|
287
|
+
to { transform: translateX(0); opacity: 1; }
|
|
288
|
+
}
|
|
289
|
+
|
|
290
|
+
footer {
|
|
291
|
+
text-align: center;
|
|
292
|
+
margin-top: 40px;
|
|
293
|
+
padding-top: 20px;
|
|
294
|
+
border-top: 1px solid #e2e8f0;
|
|
295
|
+
color: #718096;
|
|
296
|
+
}
|
|
297
|
+
</style>
|
|
298
|
+
</head>
|
|
299
|
+
<body>
|
|
300
|
+
<div class="container">
|
|
301
|
+
<header>
|
|
302
|
+
<h1>📊 独立的条形码工具函数库</h1>
|
|
303
|
+
<p class="subtitle">str2png, png2str, svg2str, str2svg, png2svg, svg2png</p>
|
|
304
|
+
</header>
|
|
305
|
+
|
|
306
|
+
<div class="section">
|
|
307
|
+
<h2 class="section-title">🔧 工具函数说明</h2>
|
|
308
|
+
|
|
309
|
+
<div class="function-grid">
|
|
310
|
+
<div class="function-card">
|
|
311
|
+
<div class="function-name">str2svg(text, options)</div>
|
|
312
|
+
<div class="function-desc">将字符串转换为SVG条形码</div>
|
|
313
|
+
<div class="function-params">
|
|
314
|
+
<div><span class="param-name">text</span>: <span class="param-type">string</span> - 要编码的文本</div>
|
|
315
|
+
<div><span class="param-name">options</span>: <span class="param-type">object</span> - 条形码配置选项</div>
|
|
316
|
+
<div class="param-desc">返回: <span class="param-type">Promise<string></span> - SVG字符串</div>
|
|
317
|
+
</div>
|
|
318
|
+
</div>
|
|
319
|
+
|
|
320
|
+
<div class="function-card">
|
|
321
|
+
<div class="function-name">str2png(text, options)</div>
|
|
322
|
+
<div class="function-desc">将字符串转换为PNG条形码</div>
|
|
323
|
+
<div class="function-params">
|
|
324
|
+
<div><span class="param-name">text</span>: <span class="param-type">string</span> - 要编码的文本</div>
|
|
325
|
+
<div><span class="param-name">options</span>: <span class="param-type">object</span> - 条形码配置选项</div>
|
|
326
|
+
<div class="param-desc">返回: <span class="param-type">Promise<string></span> - PNG DataURL</div>
|
|
327
|
+
</div>
|
|
328
|
+
</div>
|
|
329
|
+
|
|
330
|
+
<div class="function-card">
|
|
331
|
+
<div class="function-name">svg2str(svgString)</div>
|
|
332
|
+
<div class="function-desc">从SVG条形码提取字符串</div>
|
|
333
|
+
<div class="function-params">
|
|
334
|
+
<div><span class="param-name">svgString</span>: <span class="param-type">string</span> - SVG条形码</div>
|
|
335
|
+
<div class="param-desc">返回: <span class="param-type">Promise<string></span> - 解码后的文本</div>
|
|
336
|
+
</div>
|
|
337
|
+
</div>
|
|
338
|
+
|
|
339
|
+
<div class="function-card">
|
|
340
|
+
<div class="function-name">png2str(pngData)</div>
|
|
341
|
+
<div class="function-desc">从PNG条形码提取字符串</div>
|
|
342
|
+
<div class="function-params">
|
|
343
|
+
<div><span class="param-name">pngData</span>: <span class="param-type">string</span> - PNG DataURL</div>
|
|
344
|
+
<div class="param-desc">返回: <span class="param-type">Promise<string></span> - 解码后的文本</div>
|
|
345
|
+
</div>
|
|
346
|
+
</div>
|
|
347
|
+
|
|
348
|
+
<div class="function-card">
|
|
349
|
+
<div class="function-name">png2svg(pngData)</div>
|
|
350
|
+
<div class="function-desc">从PNG条形码转换为SVG</div>
|
|
351
|
+
<div class="function-params">
|
|
352
|
+
<div><span class="param-name">pngData</span>: <span class="param-type">string</span> - PNG DataURL</div>
|
|
353
|
+
<div class="param-desc">返回: <span class="param-type">Promise<string></span> - SVG字符串</div>
|
|
354
|
+
</div>
|
|
355
|
+
</div>
|
|
356
|
+
|
|
357
|
+
<div class="function-card">
|
|
358
|
+
<div class="function-name">svg2png(svgString, backgroundColor)</div>
|
|
359
|
+
<div class="function-desc">从SVG条形码转换为PNG</div>
|
|
360
|
+
<div class="function-params">
|
|
361
|
+
<div><span class="param-name">svgString</span>: <span class="param-type">string</span> - SVG条形码</div>
|
|
362
|
+
<div><span class="param-name">backgroundColor</span>: <span class="param-type">string</span> - 背景色（默认: #ffffff）</div>
|
|
363
|
+
<div class="param-desc">返回: <span class="param-type">Promise<string></span> - PNG DataURL</div>
|
|
364
|
+
</div>
|
|
365
|
+
</div>
|
|
366
|
+
</div>
|
|
367
|
+
</div>
|
|
368
|
+
|
|
369
|
+
<div class="section">
|
|
370
|
+
<h2 class="section-title">🎯 实时测试</h2>
|
|
371
|
+
|
|
372
|
+
<div class="input-form">
|
|
373
|
+
<div class="form-group">
|
|
374
|
+
<label for="test-text">测试文本：</label>
|
|
375
|
+
<input type="text" id="test-text" class="form-control"
|
|
376
|
+
placeholder="输入要生成条形码的文本"
|
|
377
|
+
value="TEST-123456">
|
|
378
|
+
</div>
|
|
379
|
+
|
|
380
|
+
<div class="btn-group">
|
|
381
|
+
<button class="btn" onclick="testStr2Svg()">测试 str2svg</button>
|
|
382
|
+
<button class="btn btn-secondary" onclick="testStr2Png()">测试 str2png</button>
|
|
383
|
+
<button class="btn" onclick="testSvg2Str()">测试 svg2str</button>
|
|
384
|
+
<button class="btn btn-secondary" onclick="testPng2Str()">测试 png2str</button>
|
|
385
|
+
<button class="btn" onclick="testPng2Svg()">测试 png2svg</button>
|
|
386
|
+
<button class="btn btn-secondary" onclick="testSvg2Png()">测试 svg2png</button>
|
|
387
|
+
</div>
|
|
388
|
+
</div>
|
|
389
|
+
|
|
390
|
+
<div class="test-results" id="test-results">
|
|
391
|
+
<!-- 测试结果将在这里显示 -->
|
|
392
|
+
</div>
|
|
393
|
+
</div>
|
|
394
|
+
|
|
395
|
+
<div class="section">
|
|
396
|
+
<h2 class="section-title">📖 使用示例</h2>
|
|
397
|
+
|
|
398
|
+
<div class="code-block">
|
|
399
|
+
<pre><code>// 加载工具函数库
|
|
400
|
+
<script src="barcode-utils.js"></script>
|
|
401
|
+
|
|
402
|
+
// 示例 1: 生成SVG条形码
|
|
403
|
+
async function generateSvgBarcode() {
|
|
404
|
+
const svg = await nvimgbarcode.str2svg('123456789012', {
|
|
405
|
+
format: 'CODE128',
|
|
406
|
+
width: 2,
|
|
407
|
+
height: 100,
|
|
408
|
+
lineColor: '#e53e3e'
|
|
409
|
+
});
|
|
410
|
+
|
|
411
|
+
// 将SVG插入到页面
|
|
412
|
+
document.getElementById('svg-container').innerHTML = svg;
|
|
413
|
+
}
|
|
414
|
+
|
|
415
|
+
// 示例 2: 生成PNG条形码
|
|
416
|
+
async function generatePngBarcode() {
|
|
417
|
+
const pngData = await nvimgbarcode.str2png('PRODUCT-001', {
|
|
418
|
+
format: 'EAN13',
|
|
419
|
+
height: 120
|
|
420
|
+
});
|
|
421
|
+
|
|
422
|
+
// 创建图片元素
|
|
423
|
+
const img = document.createElement('img');
|
|
424
|
+
img.src = pngData;
|
|
425
|
+
document.body.appendChild(img);
|
|
426
|
+
}
|
|
427
|
+
|
|
428
|
+
// 示例 3: 从SVG提取文本
|
|
429
|
+
async function extractTextFromSvg() {
|
|
430
|
+
const svgString = document.getElementById('barcode-svg').outerHTML;
|
|
431
|
+
const text = await nvimgbarcode.svg2str(svgString);
|
|
432
|
+
console.log('提取的文本:', text);
|
|
433
|
+
}
|
|
434
|
+
|
|
435
|
+
// 示例 4: 从PNG提取文本
|
|
436
|
+
async function extractTextFromPng() {
|
|
437
|
+
const img = document.getElementById('barcode-png');
|
|
438
|
+
const text = await nvimgbarcode.png2str(img.src);
|
|
439
|
+
console.log('提取的文本:', text);
|
|
440
|
+
}
|
|
441
|
+
|
|
442
|
+
// 示例 5: PNG转SVG
|
|
443
|
+
async function convertPngToSvg() {
|
|
444
|
+
const img = document.getElementById('barcode-png');
|
|
445
|
+
const svg = await nvimgbarcode.png2svg(img.src);
|
|
446
|
+
console.log('转换的SVG:', svg);
|
|
447
|
+
}
|
|
448
|
+
|
|
449
|
+
// 示例 6: SVG转PNG
|
|
450
|
+
async function convertSvgToPng() {
|
|
451
|
+
const svg = document.getElementById('barcode-svg').outerHTML;
|
|
452
|
+
const png = await nvimgbarcode.svg2png(svg, '#f0f0f0');
|
|
453
|
+
console.log('转换的PNG:', png);
|
|
454
|
+
}</code></pre>
|
|
455
|
+
</div>
|
|
456
|
+
</div>
|
|
457
|
+
|
|
458
|
+
<div class="section">
|
|
459
|
+
<h2 class="section-title">🔄 完整转换测试</h2>
|
|
460
|
+
|
|
461
|
+
<div class="input-form">
|
|
462
|
+
<div class="form-group">
|
|
463
|
+
<label for="full-test-text">测试文本：</label>
|
|
464
|
+
<input type="text" id="full-test-text" class="form-control"
|
|
465
|
+
value="完整转换测试-ABC123">
|
|
466
|
+
</div>
|
|
467
|
+
|
|
468
|
+
<button class="btn btn-full" onclick="runFullConversionTest()">运行完整转换测试</button>
|
|
469
|
+
</div>
|
|
470
|
+
|
|
471
|
+
<div id="full-test-results"></div>
|
|
472
|
+
</div>
|
|
473
|
+
|
|
474
|
+
<footer>
|
|
475
|
+
<p>条形码工具函数库 | 独立使用，无需任何依赖</p>
|
|
476
|
+
</footer>
|
|
477
|
+
</div>
|
|
478
|
+
|
|
479
|
+
<div class="alert" id="alert"></div>
|
|
480
|
+
|
|
481
|
+
<!-- 引入条形码工具函数库 -->
|
|
482
|
+
<script>@SCRIPT@</script>
|
|
483
|
+
|
|
484
|
+
<script>
|
|
485
|
+
// 显示提示
|
|
486
|
+
function showAlert(message, type = 'success') {
|
|
487
|
+
const alertDiv = document.getElementById('alert');
|
|
488
|
+
const colors = {
|
|
489
|
+
success: '#38a169',
|
|
490
|
+
error: '#e53e3e',
|
|
491
|
+
warning: '#d69e2e',
|
|
492
|
+
info: '#667eea'
|
|
493
|
+
};
|
|
494
|
+
|
|
495
|
+
alertDiv.textContent = message;
|
|
496
|
+
alertDiv.style.background = colors[type] || colors.success;
|
|
497
|
+
alertDiv.className = 'alert ' + (type === 'error' ? 'error' : type === 'warning' ? 'warning' : '') + ' show';
|
|
498
|
+
|
|
499
|
+
setTimeout(() => {
|
|
500
|
+
alertDiv.classList.remove('show');
|
|
501
|
+
}, 3000);
|
|
502
|
+
}
|
|
503
|
+
|
|
504
|
+
// 清理测试结果
|
|
505
|
+
function clearTestResults() {
|
|
506
|
+
document.getElementById('test-results').innerHTML = '';
|
|
507
|
+
}
|
|
508
|
+
|
|
509
|
+
// 添加测试结果
|
|
510
|
+
function addTestResult(title, content, type = 'text') {
|
|
511
|
+
const testResults = document.getElementById('test-results');
|
|
512
|
+
const resultDiv = document.createElement('div');
|
|
513
|
+
resultDiv.className = 'test-result';
|
|
514
|
+
|
|
515
|
+
let contentHtml = '';
|
|
516
|
+
if (type === 'image') {
|
|
517
|
+
contentHtml = `<div class="image-preview"><img src="${content}" alt="预览"></div>`;
|
|
518
|
+
} else if (type === 'code') {
|
|
519
|
+
contentHtml = `<div class="result-content">${content.substring(0, 500)}${content.length > 500 ? '...' : ''}</div>`;
|
|
520
|
+
} else {
|
|
521
|
+
contentHtml = `<div class="result-content">${content}</div>`;
|
|
522
|
+
}
|
|
523
|
+
|
|
524
|
+
resultDiv.innerHTML = `
|
|
525
|
+
<div class="test-result-title">${title}</div>
|
|
526
|
+
${contentHtml}
|
|
527
|
+
`;
|
|
528
|
+
|
|
529
|
+
testResults.appendChild(resultDiv);
|
|
530
|
+
}
|
|
531
|
+
|
|
532
|
+
// 测试 str2svg
|
|
533
|
+
async function testStr2Svg() {
|
|
534
|
+
clearTestResults();
|
|
535
|
+
const text = document.getElementById('test-text').value.trim();
|
|
536
|
+
|
|
537
|
+
if (!text) {
|
|
538
|
+
showAlert('请输入测试文本', 'error');
|
|
539
|
+
return;
|
|
540
|
+
}
|
|
541
|
+
|
|
542
|
+
try {
|
|
543
|
+
showAlert('正在生成SVG条形码...', 'info');
|
|
544
|
+
const svg = await nvimgbarcode.str2svg(text, {
|
|
545
|
+
format: 'CODE128',
|
|
546
|
+
width: 2,
|
|
547
|
+
height: 100,
|
|
548
|
+
lineColor: '#e53e3e',
|
|
549
|
+
displayValue: true
|
|
550
|
+
});
|
|
551
|
+
|
|
552
|
+
addTestResult('str2svg 结果 (SVG条形码)', svg, 'code');
|
|
553
|
+
|
|
554
|
+
// 在页面上显示SVG
|
|
555
|
+
const svgContainer = document.createElement('div');
|
|
556
|
+
svgContainer.innerHTML = svg;
|
|
557
|
+
document.getElementById('test-results').appendChild(svgContainer);
|
|
558
|
+
|
|
559
|
+
showAlert('SVG条形码生成成功！', 'success');
|
|
560
|
+
} catch (error) {
|
|
561
|
+
addTestResult('str2svg 错误', error.message, 'text');
|
|
562
|
+
showAlert('生成失败: ' + error.message, 'error');
|
|
563
|
+
}
|
|
564
|
+
}
|
|
565
|
+
|
|
566
|
+
// 测试 str2png
|
|
567
|
+
async function testStr2Png() {
|
|
568
|
+
clearTestResults();
|
|
569
|
+
const text = document.getElementById('test-text').value.trim();
|
|
570
|
+
|
|
571
|
+
if (!text) {
|
|
572
|
+
showAlert('请输入测试文本', 'error');
|
|
573
|
+
return;
|
|
574
|
+
}
|
|
575
|
+
|
|
576
|
+
try {
|
|
577
|
+
showAlert('正在生成PNG条形码...', 'info');
|
|
578
|
+
const pngData = await nvimgbarcode.str2png(text, {
|
|
579
|
+
format: 'CODE128',
|
|
580
|
+
width: 2,
|
|
581
|
+
height: 100,
|
|
582
|
+
lineColor: '#38a169',
|
|
583
|
+
displayValue: true
|
|
584
|
+
});
|
|
585
|
+
|
|
586
|
+
addTestResult('str2png 结果 (PNG条形码)', pngData, 'image');
|
|
587
|
+
showAlert('PNG条形码生成成功！', 'success');
|
|
588
|
+
} catch (error) {
|
|
589
|
+
addTestResult('str2png 错误', error.message, 'text');
|
|
590
|
+
showAlert('生成失败: ' + error.message, 'error');
|
|
591
|
+
}
|
|
592
|
+
}
|
|
593
|
+
|
|
594
|
+
// 测试 svg2str
|
|
595
|
+
async function testSvg2Str() {
|
|
596
|
+
clearTestResults();
|
|
597
|
+
const text = document.getElementById('test-text').value.trim();
|
|
598
|
+
|
|
599
|
+
if (!text) {
|
|
600
|
+
showAlert('请输入测试文本', 'error');
|
|
601
|
+
return;
|
|
602
|
+
}
|
|
603
|
+
|
|
604
|
+
try {
|
|
605
|
+
showAlert('正在生成SVG并提取文本...', 'info');
|
|
606
|
+
const svg = await nvimgbarcode.str2svg(text, {
|
|
607
|
+
format: 'CODE128',
|
|
608
|
+
width: 2,
|
|
609
|
+
height: 100,
|
|
610
|
+
lineColor: '#805ad5',
|
|
611
|
+
displayValue: false
|
|
612
|
+
});
|
|
613
|
+
|
|
614
|
+
addTestResult('生成的SVG条形码', svg, 'code');
|
|
615
|
+
|
|
616
|
+
const decodedText = await nvimgbarcode.svg2str(svg);
|
|
617
|
+
addTestResult('svg2str 结果 (提取的文本)', decodedText, 'text');
|
|
618
|
+
|
|
619
|
+
showAlert('文本提取成功！', 'success');
|
|
620
|
+
} catch (error) {
|
|
621
|
+
addTestResult('svg2str 错误', error.message, 'text');
|
|
622
|
+
showAlert('提取失败: ' + error.message, 'error');
|
|
623
|
+
}
|
|
624
|
+
}
|
|
625
|
+
|
|
626
|
+
// 测试 png2str
|
|
627
|
+
async function testPng2Str() {
|
|
628
|
+
clearTestResults();
|
|
629
|
+
const text = document.getElementById('test-text').value.trim();
|
|
630
|
+
|
|
631
|
+
if (!text) {
|
|
632
|
+
showAlert('请输入测试文本', 'error');
|
|
633
|
+
return;
|
|
634
|
+
}
|
|
635
|
+
|
|
636
|
+
try {
|
|
637
|
+
showAlert('正在生成PNG并提取文本...', 'info');
|
|
638
|
+
const pngData = await nvimgbarcode.str2png(text, {
|
|
639
|
+
format: 'CODE128',
|
|
640
|
+
width: 2,
|
|
641
|
+
height: 100,
|
|
642
|
+
lineColor: '#d69e2e',
|
|
643
|
+
displayValue: false
|
|
644
|
+
});
|
|
645
|
+
|
|
646
|
+
addTestResult('生成的PNG条形码', pngData, 'image');
|
|
647
|
+
|
|
648
|
+
const decodedText = await nvimgbarcode.png2str(pngData);
|
|
649
|
+
addTestResult('png2str 结果 (提取的文本)', decodedText, 'text');
|
|
650
|
+
|
|
651
|
+
showAlert('文本提取成功！', 'success');
|
|
652
|
+
} catch (error) {
|
|
653
|
+
addTestResult('png2str 错误', error.message, 'text');
|
|
654
|
+
showAlert('提取失败: ' + error.message, 'error');
|
|
655
|
+
}
|
|
656
|
+
}
|
|
657
|
+
|
|
658
|
+
// 测试 png2svg
|
|
659
|
+
async function testPng2Svg() {
|
|
660
|
+
clearTestResults();
|
|
661
|
+
const text = document.getElementById('test-text').value.trim();
|
|
662
|
+
|
|
663
|
+
if (!text) {
|
|
664
|
+
showAlert('请输入测试文本', 'error');
|
|
665
|
+
return;
|
|
666
|
+
}
|
|
667
|
+
|
|
668
|
+
try {
|
|
669
|
+
showAlert('正在生成PNG并转换为SVG...', 'info');
|
|
670
|
+
const pngData = await nvimgbarcode.str2png(text, {
|
|
671
|
+
format: 'CODE128',
|
|
672
|
+
width: 2,
|
|
673
|
+
height: 100,
|
|
674
|
+
lineColor: '#e53e3e',
|
|
675
|
+
displayValue: false
|
|
676
|
+
});
|
|
677
|
+
|
|
678
|
+
addTestResult('原始PNG条形码', pngData, 'image');
|
|
679
|
+
|
|
680
|
+
const svg = await nvimgbarcode.png2svg(pngData);
|
|
681
|
+
addTestResult('png2svg 结果 (转换的SVG)', svg, 'code');
|
|
682
|
+
|
|
683
|
+
// 在页面上显示SVG
|
|
684
|
+
const svgContainer = document.createElement('div');
|
|
685
|
+
svgContainer.innerHTML = svg;
|
|
686
|
+
document.getElementById('test-results').appendChild(svgContainer);
|
|
687
|
+
|
|
688
|
+
showAlert('PNG转SVG成功！', 'success');
|
|
689
|
+
} catch (error) {
|
|
690
|
+
addTestResult('png2svg 错误', error.message, 'text');
|
|
691
|
+
showAlert('转换失败: ' + error.message, 'error');
|
|
692
|
+
}
|
|
693
|
+
}
|
|
694
|
+
|
|
695
|
+
// 测试 svg2png
|
|
696
|
+
async function testSvg2Png() {
|
|
697
|
+
clearTestResults();
|
|
698
|
+
const text = document.getElementById('test-text').value.trim();
|
|
699
|
+
|
|
700
|
+
if (!text) {
|
|
701
|
+
showAlert('请输入测试文本', 'error');
|
|
702
|
+
return;
|
|
703
|
+
}
|
|
704
|
+
|
|
705
|
+
try {
|
|
706
|
+
showAlert('正在生成SVG并转换为PNG...', 'info');
|
|
707
|
+
const svg = await nvimgbarcode.str2svg(text, {
|
|
708
|
+
format: 'CODE128',
|
|
709
|
+
width: 2,
|
|
710
|
+
height: 100,
|
|
711
|
+
lineColor: '#38a169',
|
|
712
|
+
displayValue: false
|
|
713
|
+
});
|
|
714
|
+
|
|
715
|
+
addTestResult('原始SVG条形码', svg, 'code');
|
|
716
|
+
|
|
717
|
+
const pngData = await nvimgbarcode.svg2png(svg, '#f0f0f0');
|
|
718
|
+
addTestResult('svg2png 结果 (转换的PNG)', pngData, 'image');
|
|
719
|
+
|
|
720
|
+
showAlert('SVG转PNG成功！', 'success');
|
|
721
|
+
} catch (error) {
|
|
722
|
+
addTestResult('svg2png 错误', error.message, 'text');
|
|
723
|
+
showAlert('转换失败: ' + error.message, 'error');
|
|
724
|
+
}
|
|
725
|
+
}
|
|
726
|
+
|
|
727
|
+
// 运行完整转换测试
|
|
728
|
+
async function runFullConversionTest() {
|
|
729
|
+
const text = document.getElementById('full-test-text').value.trim();
|
|
730
|
+
const resultsDiv = document.getElementById('full-test-results');
|
|
731
|
+
|
|
732
|
+
if (!text) {
|
|
733
|
+
showAlert('请输入测试文本', 'error');
|
|
734
|
+
return;
|
|
735
|
+
}
|
|
736
|
+
|
|
737
|
+
try {
|
|
738
|
+
showAlert('开始完整转换测试...', 'info');
|
|
739
|
+
resultsDiv.innerHTML = `
|
|
740
|
+
<div class="result-section">
|
|
741
|
+
<div class="result-title">完整转换测试流程：</div>
|
|
742
|
+
<div class="result-content">1. 原始文本: ${text}</div>
|
|
743
|
+
</div>
|
|
744
|
+
`;
|
|
745
|
+
|
|
746
|
+
// 1. 文本 -> SVG
|
|
747
|
+
const step1 = document.createElement('div');
|
|
748
|
+
step1.className = 'result-section';
|
|
749
|
+
step1.innerHTML = `<div class="result-title">步骤 1: 文本 → SVG (str2svg)</div>`;
|
|
750
|
+
resultsDiv.appendChild(step1);
|
|
751
|
+
|
|
752
|
+
const svg = await nvimgbarcode.str2svg(text, {
|
|
753
|
+
format: 'CODE128',
|
|
754
|
+
width: 2,
|
|
755
|
+
height: 100,
|
|
756
|
+
lineColor: '#667eea',
|
|
757
|
+
displayValue: true
|
|
758
|
+
});
|
|
759
|
+
|
|
760
|
+
const svgContainer = document.createElement('div');
|
|
761
|
+
svgContainer.innerHTML = svg;
|
|
762
|
+
step1.appendChild(svgContainer);
|
|
763
|
+
|
|
764
|
+
// 2. SVG -> 文本
|
|
765
|
+
const step2 = document.createElement('div');
|
|
766
|
+
step2.className = 'result-section';
|
|
767
|
+
const decodedText = await nvimgbarcode.svg2str(svg);
|
|
768
|
+
step2.innerHTML = `
|
|
769
|
+
<div class="result-title">步骤 2: SVG → 文本 (svg2str)</div>
|
|
770
|
+
<div class="result-content">提取的文本: ${decodedText}</div>
|
|
771
|
+
`;
|
|
772
|
+
resultsDiv.appendChild(step2);
|
|
773
|
+
|
|
774
|
+
// 3. 文本 -> PNG
|
|
775
|
+
const step3 = document.createElement('div');
|
|
776
|
+
step3.className = 'result-section';
|
|
777
|
+
step3.innerHTML = `<div class="result-title">步骤 3: 文本 → PNG (str2png)</div>`;
|
|
778
|
+
resultsDiv.appendChild(step3);
|
|
779
|
+
|
|
780
|
+
const png = await nvimgbarcode.str2png(text, {
|
|
781
|
+
format: 'CODE128',
|
|
782
|
+
width: 2,
|
|
783
|
+
height: 100,
|
|
784
|
+
lineColor: '#e53e3e',
|
|
785
|
+
displayValue: true
|
|
786
|
+
});
|
|
787
|
+
|
|
788
|
+
const pngImg = document.createElement('img');
|
|
789
|
+
pngImg.src = png;
|
|
790
|
+
pngImg.style.maxWidth = '300px';
|
|
791
|
+
step3.appendChild(pngImg);
|
|
792
|
+
|
|
793
|
+
// 4. PNG -> 文本
|
|
794
|
+
const step4 = document.createElement('div');
|
|
795
|
+
step4.className = 'result-section';
|
|
796
|
+
const decodedFromPng = await nvimgbarcode.png2str(png);
|
|
797
|
+
step4.innerHTML = `
|
|
798
|
+
<div class="result-title">步骤 4: PNG → 文本 (png2str)</div>
|
|
799
|
+
<div class="result-content">提取的文本: ${decodedFromPng}</div>
|
|
800
|
+
`;
|
|
801
|
+
resultsDiv.appendChild(step4);
|
|
802
|
+
|
|
803
|
+
// 5. PNG -> SVG
|
|
804
|
+
const step5 = document.createElement('div');
|
|
805
|
+
step5.className = 'result-section';
|
|
806
|
+
step5.innerHTML = `<div class="result-title">步骤 5: PNG → SVG (png2svg)</div>`;
|
|
807
|
+
resultsDiv.appendChild(step5);
|
|
808
|
+
|
|
809
|
+
const svgFromPng = await nvimgbarcode.png2svg(png);
|
|
810
|
+
const svgContainer2 = document.createElement('div');
|
|
811
|
+
svgContainer2.innerHTML = svgFromPng;
|
|
812
|
+
step5.appendChild(svgContainer2);
|
|
813
|
+
|
|
814
|
+
// 6. SVG -> PNG
|
|
815
|
+
const step6 = document.createElement('div');
|
|
816
|
+
step6.className = 'result-section';
|
|
817
|
+
step6.innerHTML = `<div class="result-title">步骤 6: SVG → PNG (svg2png)</div>`;
|
|
818
|
+
resultsDiv.appendChild(step6);
|
|
819
|
+
|
|
820
|
+
const pngFromSvg = await nvimgbarcode.svg2png(svg, '#f8f9fa');
|
|
821
|
+
const pngImg2 = document.createElement('img');
|
|
822
|
+
pngImg2.src = pngFromSvg;
|
|
823
|
+
pngImg2.style.maxWidth = '300px';
|
|
824
|
+
step6.appendChild(pngImg2);
|
|
825
|
+
|
|
826
|
+
// 总结
|
|
827
|
+
const summary = document.createElement('div');
|
|
828
|
+
summary.className = 'result-section';
|
|
829
|
+
summary.innerHTML = `
|
|
830
|
+
<div class="result-title">🎉 测试总结</div>
|
|
831
|
+
<div class="result-content">
|
|
832
|
+
<p>原始文本: ${text}</p>
|
|
833
|
+
<p>从SVG提取: ${decodedText}</p>
|
|
834
|
+
<p>从PNG提取: ${decodedFromPng}</p>
|
|
835
|
+
<p>测试结果: ✅ 所有转换完成！</p>
|
|
836
|
+
<p>注意: 由于条形码解码的复杂性，从图片中提取文本可能需要专门的解码库</p>
|
|
837
|
+
</div>
|
|
838
|
+
`;
|
|
839
|
+
resultsDiv.appendChild(summary);
|
|
840
|
+
|
|
841
|
+
showAlert('完整转换测试完成！', 'success');
|
|
842
|
+
} catch (error) {
|
|
843
|
+
resultsDiv.innerHTML = `
|
|
844
|
+
<div class="result-section">
|
|
845
|
+
<div class="result-title">❌ 测试失败</div>
|
|
846
|
+
<div class="result-content">错误: ${error.message}</div>
|
|
847
|
+
</div>
|
|
848
|
+
`;
|
|
849
|
+
showAlert('测试失败: ' + error.message, 'error');
|
|
850
|
+
}
|
|
851
|
+
}
|
|
852
|
+
|
|
853
|
+
// 页面加载完成后初始化
|
|
854
|
+
document.addEventListener('DOMContentLoaded', function() {
|
|
855
|
+
console.log('条形码工具函数库已加载');
|
|
856
|
+
console.log('可用函数:', Object.keys(window.nvimgbarcode || {}));
|
|
857
|
+
|
|
858
|
+
// 预加载库
|
|
859
|
+
nvimgbarcode.loadJsBarcode().then(() => {
|
|
860
|
+
console.log('JsBarcode 已加载');
|
|
861
|
+
}).catch(error => {
|
|
862
|
+
console.warn('JsBarcode 加载失败:', error);
|
|
863
|
+
});
|
|
864
|
+
});
|
|
865
|
+
</script>
|
|
866
|
+
</body>
|
|
867
|
+
</html>
|