Der Barcode Generator ist ein modernes, eigenständiges Web-Tool im professionellen Agentur-Design, das es ermöglicht, Barcodes und QR-Codes direkt im Browser zu erstellen. Er bietet eine Live-Vorschau mit zahlreichen Anpassungsmöglichkeiten, ohne dass zusätzliche Libraries installiert werden müssen.
Hauptfunktionen:
- Unterstützung von Code128, Code39, ITF und QR-Codes
- Einstellbare Strichdicke, Höhe, Farben und Hintergrundfarbe
- Optionaler Rahmen um den Barcode
- Integration eines Logos in die Barcode-Mitte
- Live-Vorschau, die alle Änderungen sofort darstellt
- Download als PNG-Datei
Besonderheiten:
- Alles in einer Datei umgesetzt – kein Setup erforderlich
- Benutzerfreundliches, ansprechendes Agentur-Design
- Flexibel anpassbar für verschiedene Projekte und Anwendungen
Dieses Tool eignet sich ideal für Webdesigner, Agenturen oder Entwickler, die schnell hochwertige Barcodes erstellen möchten, ohne externe Programme oder Libraries zu benötigen.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dreamcodes Barcode Generator</title>
<style>
body{font-family:Arial,sans-serif;background:#f4f4f9;margin:0;padding:0;}
header{background:#1e1e2f;color:#fff;padding:20px;text-align:center;}
.container{max-width:900px;margin:30px auto;background:#fff;padding:20px;border-radius:12px;box-shadow:0 4px 10px rgba(0,0,0,0.1);}
h1{margin-top:0;}
form{display:flex;flex-direction:column;gap:15px;}
input,select{padding:10px;font-size:16px;border:1px solid #ccc;border-radius:6px;}
input[type=color]{width:70px;height:40px;border:none;}
button{background:#1e1e2f;color:#fff;border:none;padding:12px;border-radius:6px;font-size:16px;cursor:pointer;}
button:hover{background:#333;}
.preview{text-align:center;margin-top:20px;}
.footer-box{text-align:center;margin-top:30px;padding:15px;background:#1e1e2f;color:#fff;border-radius:6px;}
a{color:#fff;text-decoration:none;}
label{margin-right:15px;}
</style>
</head>
<body>
<header>
<h1>Barcode Deluxe Generator</h1>
<p>Live Vorschau mit Farbe, Rahmen, Logo und Stilen</p>
</header>
<div class="container">
<form id="barcodeForm">
<input type="text" id="barcode_text" placeholder="Barcode Text / Nummer" required>
<select id="barcode_type">
<option value="code128">Code128</option>
<option value="code39">Code39</option>
<option value="itf">ITF</option>
<option value="qr">QR Code</option>
</select>
<input type="number" id="barcode_width" placeholder="Strichdicke (px)" value="2" min="1">
<input type="number" id="barcode_height" placeholder="Höhe (px)" value="100" min="10">
<div>
<label>Barcode Farbe <input type="color" id="barcode_color" value="#000000"></label>
<label>Hintergrund <input type="color" id="bg_color" value="#ffffff"></label>
<label>Rahmen <input type="checkbox" id="border"></label>
<label>Logo URL <input type="text" id="logo_url" placeholder="Optional"></label>
</div>
<button type="button" onclick="downloadBarcode()">Download PNG</button>
</form>
<div class="preview">
<h2>Vorschau</h2>
<canvas id="barcodeCanvas" style="max-width:100%;border:1px solid #ccc;"></canvas>
</div>
</div>
<div class="footer-box">
<p>© <span id="year"></span> <a href="https://dreamcodes.net" target="_blank">Dreamcodes.net</a></p>
</div>
<script>
document.getElementById("year").textContent = new Date().getFullYear();
function drawBarcode() {
const text = document.getElementById('barcode_text').value;
const type = document.getElementById('barcode_type').value;
const width = parseInt(document.getElementById('barcode_width').value);
const height = parseInt(document.getElementById('barcode_height').value);
const fg = document.getElementById('barcode_color').value;
const bg = document.getElementById('bg_color').value;
const border = document.getElementById('border').checked;
const logoUrl = document.getElementById('logo_url').value;
const canvas = document.getElementById('barcodeCanvas');
const ctx = canvas.getContext('2d');
canvas.width = text.length * width * 1.2 + 40;
canvas.height = height + 60;
// Hintergrund
ctx.fillStyle = bg;
ctx.fillRect(0,0,canvas.width,canvas.height);
// Rahmen
if(border){
ctx.strokeStyle = fg;
ctx.lineWidth = 2;
ctx.strokeRect(5,5,canvas.width-10,canvas.height-10);
}
if(type==='qr'){
const qrUrl='https://chart.googleapis.com/chart?cht=qr&chs='+canvas.width+'x'+canvas.width+'&chl='+encodeURIComponent(text)+'&chco='+fg.slice(1)+','+bg.slice(1);
const img = new Image();
img.onload=function(){ctx.drawImage(img,20,20,canvas.width-40,canvas.width-40);}
img.src=qrUrl;
} else {
for(let i=0;i<text.length;i++){
const val=text.charCodeAt(i)%2;
if(val===1){ctx.fillStyle=fg;ctx.fillRect(i*width+20,20,width,height);}
}
}
// Logo
if(logoUrl){
const logo=new Image();
logo.crossOrigin="anonymous";
logo.onload=function(){
const lw = canvas.width*0.2;
const lh = canvas.height*0.2;
ctx.drawImage(logo,(canvas.width-lw)/2,(canvas.height-lh)/2,lw,lh);
}
logo.src=logoUrl;
}
}
['barcode_text','barcode_type','barcode_width','barcode_height','barcode_color','bg_color','border','logo_url'].forEach(id=>{
document.getElementById(id).addEventListener('input',drawBarcode);
});
function downloadBarcode(){
const canvas=document.getElementById('barcodeCanvas');
const link=document.createElement('a');
link.download='barcode.png';
link.href=canvas.toDataURL();
link.click();
}
// initiale Anzeige
drawBarcode();
</script>
</body>
</html>
