: [1,0,1,0,1,0,0,0,0], '/': [1,0,1,0,0,0,1,0,0], '+': [1,0,0,0,0,1,0,0,1], '%': [0,0,1,0,0,0,1,0,1] }; var EAN13_WEIGHTS = [1, 3, 1, 3, 1, 3, 1, 3, 1, 3, 1, 3]; // DOM Elements var textInput = document.querySelector('.openskil-text-input'); var typeSelect = document.querySelector('.openskil-type-select'); var heightSelect = document.querySelector('.openskil-height-select'); var displaySelect = document.querySelector('.openskil-display-select'); var generateBtn = document.querySelector('.openskil-generate-btn'); var downloadBtn = document.querySelector('.openskil-download-btn'); var preview = document.querySelector('.openskil-preview'); var toast = document.querySelector('.openskil-toast'); var currentCanvas = null; // Toast notification function showToast(message) { toast.textContent = message; toast.classList.add('show'); setTimeout(function() { toast.classList.remove('show'); }, 2500); } // Calculate EAN-13 checksum function calculateEAN13Checksum(digits) { var sum = 0; for (var i = 0; i < 12; i++) { sum += parseInt(digits[i]) * EAN13_WEIGHTS[i]; } var checksum = (10 - (sum % 10)) % 10; return checksum; } // Validate EAN-13 function validateEAN13(value) { var cleaned = value.replace(/\D/g, ''); if (cleaned.length === 12) { return cleaned + calculateEAN13Checksum(cleaned); } else if (cleaned.length === 13) { return cleaned; } return null; } // Validate UPC-A function validateUPCA(value) { var cleaned = value.replace(/\D/g, ''); if (cleaned.length === 11) { var sum = 0; for (var i = 0; i < 11; i++) { sum += parseInt(cleaned[i]) * (i % 2 === 0 ? 3 : 1); } var checksum = (10 - (sum % 10)) % 10; return cleaned + checksum; } else if (cleaned.length === 12) { return cleaned; } return null; } // Validate ITF-14 function validateITF14(value) { var cleaned = value.replace(/\D/g, ''); if (cleaned.length === 13) { return cleaned; } else if (cleaned.length === 14) { return cleaned; } return null; } // Generate Code 128 function generateCode128(text, height, showText) { var barWidth = 2; var quietZone = 10; var textWidth = text.length * 11 * barWidth + quietZone * 2; var canvasHeight = height + (showText ? 30 : 0); var canvas = document.createElement('canvas'); canvas.width = textWidth; canvas.height = canvasHeight; var ctx = canvas.getContext('2d'); ctx.fillStyle = 'white'; ctx.fillRect(0, 0, canvas.width, canvas.height); // Calculate checksum var checksum = 104; // START B for (var i = 0; i < text.length; i++) { checksum += text.charCodeAt(i) * (i + 1); } checksum = checksum % 103; var x = quietZone; var patterns = CODE128_PATTERNS.patterns; // START B var startPattern = CODE128_PATTERNS.START_B; ctx.fillStyle = 'black'; for (var p = 0; p < startPattern.length; p++) { if (p % 2 === 0) { ctx.fillRect(x, 0, startPattern[p] * barWidth, height); } x += startPattern[p] * barWidth; } // Data for (var i = 0; i < text.length; i++) { var charCode = text.charCodeAt(i); var patternIndex = charCode - 32; if (patternIndex >= 0 && patternIndex < 95) { var pattern = patterns[patternIndex]; for (var p = 0; p < pattern.length; p++) { if (p % 2 === 0) { ctx.fillRect(x, 0, pattern[p] * barWidth, height); } x += pattern[p] * barWidth; } } } // Checksum var checksumPattern = patterns[checksum]; for (var p = 0; p < checksumPattern.length; p++) { if (p % 2 === 0) { ctx.fillRect(x, 0, checksumPattern[p] * barWidth, height); } x += checksumPattern[p] * barWidth; } // STOP var stopPattern = CODE128_PATTERNS.STOP; for (var p = 0; p < stopPattern.length; p++) { if (p % 2 === 0 && p < 6) { ctx.fillRect(x, 0, stopPattern[p] * barWidth, height); } x += stopPattern[p] * barWidth; } // Text if (showText) { ctx.fillStyle = 'black'; ctx.font = '14px Courier New'; ctx.textAlign = 'center'; ctx.fillText(text, canvas.width / 2, height + 20); } return canvas; } // Generate Code 39 function generateCode39(text, height, showText) { var barWidth = 3; var quietZone = 10; var textWidth = (text.length + 2) * 16 * barWidth + quietZone * 2; var canvasHeight = height + (showText ? 30 : 0); var canvas = document.createElement('canvas'); canvas.width = textWidth; canvas.height = canvasHeight; var ctx = canvas.getContext('2d'); ctx.fillStyle = 'white'; ctx.fillRect(0, 0, canvas.width, canvas.height); var x = quietZone; ctx.fillStyle = 'black'; // Start character (*) var startChar = CODE39_PATTERNS['*']; for (var s = 0; s < startChar.length; s++) { if (startChar[s] === 1) { ctx.fillRect(x, 0, barWidth, height); } x += barWidth; } x += barWidth; // inter-character gap // Data characters var upperText = text.toUpperCase(); for (var i = 0; i < upperText.length; i++) { var char = upperText[i]; if (CODE39_PATTERNS[char]) { var pattern = CODE39_PATTERNS[char]; for (var p = 0; p < pattern.length; p++) { if (pattern[p] === 1) { ctx.fillRect(x, 0, barWidth, height); } x += barWidth; } x += barWidth; // inter-character gap } } // Stop character (*) var stopChar = CODE39_PATTERNS['*']; for (var s = 0; s < stopChar.length; s++) { if (stopChar[s] === 1) { ctx.fillRect(x, 0, barWidth, height); } x += barWidth; } // Text if (showText) { ctx.fillStyle = 'black'; ctx.font = '14px Courier New'; ctx.textAlign = 'center'; ctx.fillText(text, canvas.width / 2, height + 20); } return canvas; } // Generate EAN-13 function generateEAN13(text, height, showText) { var validText = validateEAN13(text); if (!validText) { return null; } var barWidth = 2; var quietZone = 10; var textWidth = 95 * barWidth + quietZone * 2; var canvasHeight = height + (showText ? 40 : 0); var canvas = document.createElement('canvas'); canvas.width = textWidth; canvas.height = canvasHeight; var ctx = canvas.getContext('2d'); ctx.fillStyle = 'white'; ctx.fillRect(0, 0, canvas.width, canvas.height); var x = quietZone; ctx.fillStyle = 'black'; // Start guard ctx.fillRect(x, 0, barWidth, height); x += barWidth; ctx.fillRect(x, 0, barWidth, height); x += barWidth * 2; // Left side (first digit determines encoding) var firstDigit = parseInt(validText[0]); var L_G_R = [ 'LLLLLL', 'LLGLGG', 'LLGGLG', 'LLGGGL', 'LGLLGG', 'LGGLLG', 'LGGGLL', 'LGLGLG', 'LGLGGL', 'LGGLGL' ]; var L_patterns = [ [0,0,0,1,1,0,1], [0,0,1,1,0,0,1], [0,0,1,0,0,1,1], [0,1,1,1,1,0,1], [0,1,0,0,1,1,1], [0,1,1,0,0,1,1], [0,1,0,1,1,1,1], [0,1,1,1,0,1,1], [0,1,0,1,0,1,1], [0,0,0,1,0,1,1] ]; var G_patterns = [ [0,1,0,0,1,1,1], [0,1,1,0,0,1,1], [0,0,1,1,0,1,1], [0,1,0,0,0,0,1], [0,0,1,1,1,0,1], [0,1,1,1,0,0,1], [0,0,0,0,1,0,1], [0,0,1,0,0,0,1], [0,0,0,1,0,0,1], [0,0,1,0,1,1,1] ]; var R_patterns = [ [1,1,0,0,1,1,1], [1,1,0,1,0,1,1], [1,0,1,0,0,1,1], [1,1,1,0,0,0,1], [1,0,0,1,1,1,0], [1,1,0,1,1,0,0], [1,0,0,0,1,0,0], [1,0,1,1,0,0,0], [1,0,0,1,0,0,0], [1,0,1,0,0,1,0] ]; var encoding = L_G_R[firstDigit]; for (var i = 0; i < 6; i++) { var digit = parseInt(validText[i + 1]); var pattern; if (encoding[i] === 'L') { pattern = L_patterns[digit]; } else { pattern = G_patterns[digit]; } for (var b = 0; b < 7; b++) { if (pattern[b] === 1) { ctx.fillRect(x, 0, barWidth, height); } x += barWidth; } } // Center guard x += barWidth; ctx.fillRect(x, 0, barWidth, height); x += barWidth * 2; ctx.fillRect(x, 0, barWidth, height); x += barWidth * 2; // Right side for (var i = 7; i < 13; i++) { var digit = parseInt(validText[i]); var pattern = R_patterns[digit]; for (var b = 0; b < 7; b++) { if (pattern[b] === 1) { ctx.fillRect(x, 0, barWidth, height); } x += barWidth; } } // End guard ctx.fillRect(x, 0, barWidth, height); x += barWidth; ctx.fillRect(x, 0, barWidth, height); // Text if (showText) { ctx.fillStyle = 'black'; ctx.font = 'bold 16px Arial'; ctx.textAlign = 'center'; ctx.fillText(validText[0], quietZone + 5, height + 18); ctx.font = 'bold 14px Arial'; ctx.fillText(validText.substring(1, 7), quietZone + 30 + 42 * barWidth, height + 18); ctx.fillText(validText.substring(7), quietZone + 30 + 42 * barWidth + 5 + 42 * barWidth, height + 18); } return canvas; } // Generate UPC-A function generateUPCA(text, height, showText) { var validText = validateUPCA(text); if (!validText) { return null; } var barWidth = 2; var quietZone = 10; var textWidth = 95 * barWidth + quietZone * 2; var canvasHeight = height + (showText ? 40 : 0); var canvas = document.createElement('canvas'); canvas.width = textWidth; canvas.height = canvasHeight; var ctx = canvas.getContext('2d'); ctx.fillStyle = 'white'; ctx.fillRect(0, 0, canvas.width, canvas.height); var x = quietZone; ctx.fillStyle = 'black'; // Start guard ctx.fillRect(x, 0, barWidth, height); x += barWidth; ctx.fillRect(x, 0, barWidth, height); x += barWidth * 2; // Left side (numbers 1-6) for (var i = 0; i < 6; i++) { var digit = parseInt(validText[i]); var pattern = L_patterns[digit]; for (var b = 0; b < 7; b++) { if (pattern[b] === 1) { ctx.fillRect(x, 0, barWidth, height); } x += barWidth; } } // Center guard x += barWidth; ctx.fillRect(x, 0, barWidth, height); x += barWidth * 2; ctx.fillRect(x, 0, barWidth, height); x += barWidth * 2; // Right side for (var i = 6; i < 12; i++) { var digit = parseInt(validText[i]); var pattern = R_patterns[digit]; for (var b = 0; b < 7; b++) { if (pattern[b] === 1) { ctx.fillRect(x, 0, barWidth, height); } x += barWidth; } } // End guard ctx.fillRect(x, 0, barWidth, height); x += barWidth; ctx.fillRect(x, 0, barWidth, height); // Text if (showText) { ctx.fillStyle = 'black'; ctx.font = 'bold 14px Arial'; ctx.textAlign = 'center'; ctx.fillText(validText.substring(0, 1), quietZone + 3, height + 18); ctx.fillText(validText.substring(1, 6), quietZone + 25 + 42 * barWidth, height + 18); ctx.fillText(validText.substring(6, 11), quietZone + 30 + 42 * barWidth + 5 + 42 * barWidth, height + 18); ctx.fillText(validText.substring(11), quietZone + 30 + 42 * barWidth * 2 + 10 + 42 * barWidth, height + 18); } return canvas; } // Generate ITF-14 function generateITF14(text, height, showText) { var validText = validateITF14(text); if (!validText) { return null; } var barWidth = 2; var quietZone = 10; var textWidth = validText.length * 10 * barWidth + quietZone * 2; var canvasHeight = height + (showText ? 30 : 0); var canvas = document.createElement('canvas'); canvas.width = textWidth; canvas.height = canvasHeight; var ctx = canvas.getContext('2d'); ctx.fillStyle = 'white'; ctx.fillRect(0, 0, canvas.width, canvas.height); var x = quietZone; ctx.fillStyle = 'black'; // Start frame bar ctx.fillRect(x, 0, barWidth, height); x += barWidth; ctx.fillRect(x, 0, barWidth, height); x += barWidth * 2; // Data digits for (var i = 0; i < validText.length; i++) { var digit = parseInt(validText[i]); var pattern = [ [1, 0, 1, 0, 1], [1, 0, 0, 1, 1], [1, 1, 0, 0, 1], [1, 1, 0, 1, 0], [0, 1, 1, 0, 1], [0, 1, 0, 1, 1], [0, 0, 1, 1, 1], [0, 0, 1, 0, 1], [0, 1, 0, 0, 1], [1, 0, 0, 0, 1] ][digit]; for (var p = 0; p < 5; p++) { if (pattern[p] === 1) { ctx.fillRect(x, 0, barWidth, height); } x += barWidth; } // Inter-digit space (narrow) x += barWidth; } // End frame bar ctx.fillRect(x, 0, barWidth, height); x += barWidth * 2; ctx.fillRect(x, 0, barWidth, height); // Text if (showText) { ctx.fillStyle = 'black'; ctx.font = '14px Courier New'; ctx.textAlign = 'center'; ctx.fillText(validText, canvas.width / 2, height + 20); } return canvas; } // Generate MSI function generateMSI(text, height, showText) { var barWidth = 2; var quietZone = 10; var textWidth = (text.length * 12 + 15) * barWidth + quietZone * 2; var canvasHeight = height + (showText ? 30 : 0); var canvas = document.createElement('canvas'); canvas.width = textWidth; canvas.height = canvasHeight; var ctx = canvas.getContext('2d'); ctx.fillStyle = 'white'; ctx.fillRect(0, 0, canvas.width, canvas.height); var x = quietZone; ctx.fillStyle = 'black'; // Start ctx.fillRect(x, 0, barWidth, height); x += barWidth * 2; // Calculate checksum (Modulo 10) var sum = 0; for (var i = 0; i < text.length; i++) { var digit = parseInt(text[i]); if (i % 2 === 0) { sum += digit; } else { sum += Math.floor(digit * 2 / 10) + (digit * 2 % 10); } } var checksum = (10 - (sum % 10)) % 10; var fullText = text + checksum; for (var i = 0; i < fullText.length; i++) { var digit = parseInt(fullText[i]); // Binary representation (7 bars) var pattern = [ [1,0,1,0,1,0,1], [1,0,0,1,1,0,1], [0,1,1,0,0,1,1], [1,1,0,0,1,0,1], [0,0,1,1,0,1,1], [1,0,1,1,0,0,1], [0,0,0,1,1,1,1], [0,0,1,0,1,1,1], [0,1,0,0,1,1,1], [1,0,0,0,0,1,1] ][digit]; for (var p = 0; p < 7; p++) { if (pattern[p] === 1) { ctx.fillRect(x, 0, barWidth, height); } x += barWidth; } x += barWidth; // space } // End ctx.fillRect(x, 0, barWidth, height); x += barWidth * 2; ctx.fillRect(x, 0, barWidth, height); // Text if (showText) { ctx.fillStyle = 'black'; ctx.font = '14px Courier New'; ctx.textAlign = 'center'; ctx.fillText(text, canvas.width / 2, height + 20); } return canvas; } // Generate Pharmacode function generatePharmacode(text, height, showText) { var number = parseInt(text); if (isNaN(number) || number < 3 || number > 131070) { return null; } var barWidth = 3; var quietZone = 10; var maxWidth = Math.ceil(Math.log2(number + 1)) * 2 * barWidth + quietZone * 2; var canvasHeight = height + (showText ? 30 : 0); var canvas = document.createElement('canvas'); canvas.width = maxWidth; canvas.height = canvasHeight; var ctx = canvas.getContext('2d'); ctx.fillStyle = 'white'; ctx.fillRect(0, 0, canvas.width, canvas.height); var x = quietZone; ctx.fillStyle = 'black'; var value = number; var bars = []; while (value > 0) { if (value % 2 === 0) { bars.push(1); value = value / 2; } else { bars.push(0); value = (value - 1) / 2; } } for (var i = 0; i < bars.length; i++) { if (bars[i] === 1) { ctx.fillRect(x, 0, barWidth, height); } x += barWidth; ctx.fillRect(x, 0, barWidth, height); x += barWidth; } // Text if (showText) { ctx.fillStyle = 'black'; ctx.font = '14px Courier New'; ctx.textAlign = 'center'; ctx.fillText(text, canvas.width / 2, height + 20); } return canvas; } // Generate barcode function generateBarcode() { var text = textInput.value.trim(); var type = typeSelect.value; var height = parseInt(heightSelect.value); var showText = displaySelect.value === 'true'; if (!text) { showToast('请输入要生成条形码的内容'); return; } var canvas = null; switch (type) { case 'CODE128': canvas = generateCode128(text, height, showText); break; case 'CODE39': canvas = generateCode39(text, height, showText); break; case 'EAN13': canvas = generateEAN13(text, height, showText); if (!canvas) { showToast('EAN-13需要输入12或13位数字'); return; } break; case 'UPC': canvas = generateUPCA(text, height, showText); if (!canvas) { showToast('UPC-A需要输入11或12位数字'); return; } break; case 'ITF14': canvas = generateITF14(text, height, showText); if (!canvas) { showToast('ITF-14需要输入13或14位数字'); return; } break; case 'MSI': canvas = generateMSI(text, height, showText); if (!canvas) { showToast('MSI需要输入数字'); return; } break; case 'pharmacode': canvas = generatePharmacode(text, height, showText); if (!canvas) { showToast('Pharmacode需要输入3-131070之间的数字'); return; } break; } if (canvas) { currentCanvas = canvas; preview.innerHTML = ''; preview.classList.add('has-image'); var container = document.createElement('div'); container.className = 'openskil-barcode-container'; var img = document.createElement('img'); img.className = 'openskil-barcode-image'; img.src = canvas.toDataURL('image/png'); img.alt = 'Barcode'; if (showText) { var textDiv = document.createElement('div'); textDiv.className = 'openskil-barcode-text'; textDiv.textContent = text; container.appendChild(textDiv); } container.appendChild(img); preview.appendChild(container); showToast('条形码生成成功！'); } } // Download barcode function downloadBarcode() { if (!currentCanvas) { showToast('请先生成条形码'); return; } var link = document.createElement('a'); link.download = 'barcode_' + Date.now() + '.png'; link.href = currentCanvas.toDataURL('image/png'); link.click(); showToast('条形码图片已下载！'); } // Event listeners generateBtn.addEventListener('click', generateBarcode); downloadBtn.addEventListener('click', downloadBarcode); textInput.addEventListener('keypress', function(e) { if (e.key === 'Enter') { generateBarcode(); } }); // Auto-generate on input change typeSelect.addEventListener('change', function() { if (textInput.value.trim()) { generateBarcode(); } }); heightSelect.addEventListener('change', function() { if (textInput.value.trim()) { generateBarcode(); } }); displaySelect.addEventListener('change', function() { if (textInput.value.trim()) { generateBarcode(); } }); // Generate sample barcode on load textInput.value = 'OPENSKIL2024'; generateBarcode(); })();