I'm creating a barcode generator. The Barcodes are generated successfully. But I need custom text to be inserted above and below the image. The following is my code. I want to add custom text to it. After adding text to above and below the image, I want to get the same text and barcode in a image when I click download button. Thanks in Advance.
Here is the demo link http://saigroups.in/barcode/
<!doctype html>
<html><head><title>Barcode Generator</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="utf-8" />
<meta name="description" content="Barcode Generator Created BY Hariram" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="plugins/lib/bwipp.js"></script>
<script type="text/javascript" src="plugins/lib/bwipjs.js"></script>
<script type="text/javascript" src="plugins/lib/jquery.js"></script>
<script type="text/javascript" src="plugins/lib/jquery-ui.min.js"></script>
<script type="text/javascript" src="plugins/lib/xhr-fonts.js"></script>
<script type="text/javascript" src="plugins/lib/bitmap.js"></script>
<script type="text/javascript" src="plugins/lib/symdesc.js"></script>
<script type="text/javascript" src="plugins/lib/canvas-toblob.js"></script>
<script type="text/javascript" src="plugins/lib/filesaver.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var lastSymbol = localStorage.getItem('bwipjsLastSymbol');
var lastBarText = localStorage.getItem('bwipjsLastBarText');
var lastAltText = localStorage.getItem('bwipjsLastAltText');
var lastOptions = localStorage.getItem('bwipjsLastOptions');
var lastRotate = localStorage.getItem('bwipjsLastRotation');
var lastScaleX = +localStorage.getItem('bwipjsLastScaleX');
var lastScaleY = +localStorage.getItem('bwipjsLastScaleY');
var lastFntMono = +localStorage.getItem('bwipjsLastFontMono');
var $sel = $('#symbol')
.change(function(ev) {
var desc = symdesc[$(this).val()];
if (desc) {
$('#symtext').val(desc.text);
$('#symopts').val(desc.opts);
} else {
$('#symtext').val('');
$('#symopts').val('');
}
$('#symaltx').val('');
$('.saveas').css('visibility', 'hidden');
$('#proof-img').css('visibility', 'hidden');
$('#stats').text('');
var canvas = document.getElementById('canvas');
canvas.width = canvas.width;
});
if (lastSymbol) {
$sel.val(lastSymbol);
} else {
$sel.prop('selectedIndex', 0);
}
$sel.trigger('change');
if (lastBarText) {
$('#symtext').val(lastBarText);
$('#symaltx').val(lastAltText);
$('#symopts').val(lastOptions);
}
if (lastScaleX && lastScaleY) {
$('#scaleX').val(lastScaleX);
$('#scaleY').val(lastScaleY);
}
if (lastRotate) {
document.getElementById('rot' + lastRotate).checked = true;
}
if (lastFntMono) {
document.getElementById('fontMono').checked = true;
}
$('#scaleX').spinner({ min:1 })
.on("spinstop", function(ev) {
$('#scaleY').val(this.value);
});
$('#scaleY').spinner({ min:1 });
$('#render').button().click(render);
$('.saveas').css('visibility', 'hidden');
if (location.search.indexOf('proofs=1') != -1) {
// Show the images from BWIPP with Ghostscript
var img = document.createElement('img');
img.id = 'proof-img';
img.style.visibility = 'hidden';
img.style.position = 'absolute';
img.style.top = '0px';
img.style.left = '0px';
$('#proof').append(img);
}
// Allow Enter to render
$('#params').keypress(function(ev) {
if (ev.which == 13) {
render();
ev.stopPropagation();
ev.preventDefault();
return false;
}
});
document.getElementById('versions').textContent =
'bwip-js ' + BWIPJS.VERSION + ' / BWIPP ' + BWIPP.VERSION;
});
function render() {
var elt = symdesc[$('#symbol').val()];
var text = $('#symtext').val().replace(/^\s+/,'').replace(/\s+$/,'');
var altx = $('#symaltx').val().replace(/^\s+/,'').replace(/\s+$/,'');
var opts = $('#symopts').val().replace(/^\s+/,'').replace(/\s+$/,'');
var rot = "N";
// Anti-aliased or monochrome fonts and scaling factors.
var monochrome = document.getElementById('fontMono').checked;
var scaleX = 2;
var scaleY = 2;
localStorage.setItem('bwipjsLastSymbol', elt.sym);
localStorage.setItem('bwipjsLastBarText', text);
localStorage.setItem('bwipjsLastAltText', altx);
localStorage.setItem('bwipjsLastOptions', opts);
localStorage.setItem('bwipjsLastScaleX', scaleX);
localStorage.setItem('bwipjsLastScaleY', scaleY);
localStorage.setItem('bwipjsLastFontMono', monochrome ? 1 : 0);
localStorage.setItem('bwipjsLastRotation', rot);
var bw = new BWIPJS(bwipjs_fonts, monochrome);
// Clear the page
$('#output').text('');
$('#stats').text('');
$('#proof-img').css('visibility', 'hidden');
$('.saveas').css('visibility', 'hidden');
var canvas = document.getElementById('canvas');
canvas.height = 1;
canvas.width = 1;
canvas.style.visibility = 'hidden';
// Convert the options to a dictionary object, so we can pass alttext with
// spaces.
var tmp = opts.split(' ');
opts = {};
for (var i = 0; i < tmp.length; i++) {
if (!tmp[i]) {
continue;
}
var eq = tmp[i].indexOf('=');
if (eq == -1) {
opts[tmp[i]] = true;
} else {
opts[tmp[i].substr(0, eq)] = tmp[i].substr(eq+1);
}
}
// Add the alternate text
if (altx) {
opts.alttext = altx;
opts.includetext = true;
}
// We use mm rather than inches for height - except pharmacode2 height
// which is expected to be in mm
if (+opts.height && elt.sym != 'pharmacode2') {
opts.height = opts.height / 25.4 || 0.5;
}
// Likewise, width.
if (+opts.width) {
opts.width = opts.width / 25.4 || 0;
}
// BWIPP does not extend the background color into the
// human readable text. Fix that in the bitmap interface.
if (opts.backgroundcolor) {
bw.bitmap(new Bitmap(canvas, rot, opts.backgroundcolor));
delete opts.backgroundcolor;
} else {
bw.bitmap(new Bitmap(canvas, rot));
}
// Set the scaling factors
bw.scale(scaleX, scaleY);
// Add optional padding to the image
bw.bitmap().pad(+opts.paddingwidth*scaleX || 0,
+opts.paddingheight*scaleY || 0);
var ts0 = Date.now();
try {
// Call into the BWIPP cross-compiled code.
BWIPP()(bw, elt.sym, text, opts);
// Allow the font manager to demand-load any required fonts
// before calling render().
var ts1 = Date.now();
bwipjs_fonts.loadfonts(function(e) {
if (e) {
$('#output').text(e.stack || (''+e));
} else {
show();
}
});
} catch (e) {
// Watch for BWIPP generated raiseerror's.
var msg = ''+e;
if (msg.indexOf("bwipp.") >= 0) {
$('#output').text(msg);
} else if (e.stack) {
$('#output').text(e.stack);
} else {
$('#output').text(e);
}
return;
}
// Draw the barcode to the canvas
function show() {
bw.render();
var ts2 = Date.now();
canvas.style.visibility = 'visible';
setURL();
$('#stats').text('Rendered in ' + (ts2-ts0) + ' msecs');
$('.saveas').css('visibility', 'visible');
saveCanvas.basename = elt.sym + '-' +
text.replace(/[^a-zA-Z0-9._]+/g, '-');
// Show proofs?
if (location.search.indexOf('proofs=1') != -1) {
var img = document.getElementById('proof-img');
if (img) {
img.src = 'proofs/' + elt.sym + '.png';
img.style.visibility = 'visible';
}
}
}
}
function saveCanvas(type, ext) {
var canvas = document.getElementById('canvas');
canvas.toBlob(function (blob) {
saveAs(blob, saveCanvas.basename + ext);
}, type, 1);
}
function setURL() {
var elt = symdesc[$('#symbol').val()];
var text = $('#symtext').val().replace(/^\s+/,'').replace(/\s+$/,'');
var altx = $('#symaltx').val().replace(/^\s+/,'').replace(/\s+$/,'');
var opts = $('#symopts').val().replace(/^\s+/,'').replace(/\s+$/,'');
var rot = document.querySelector('input[name="rot"]:checked').value;
var mono = document.getElementById('fontMono').checked;
var scaleX = +document.getElementById('scaleX').value || 2;
var scaleY = +document.getElementById('scaleY').value || scaleX;
var url = 'http://bwipjs-api.metafloor.com/?bcid=' + elt.sym +
'&text=' + encodeURIComponent(text) +
(altx ? '&alttext=' + encodeURIComponent(altx) : '') +
(opts ? '&' + opts.replace(/ +/g, '&') : '') +
(rot != 'N' ? '&rotate=' + rot : '') +
(scaleX == scaleY ? '&scale=' + scaleX
: '&scaleX=' + scaleX + '&scaleY=' + scaleY) +
(mono ? '&monochrome' : '');
document.getElementById('apiurl').href = url;
}
</script>
</head><body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Barcode Generator</a>
</div>
</div>
</nav>
<div id="params">
<table class="table table-hover table-condensed" width="100%">
<tr><td>code Type:</td>
<td><select id="symbol" class="form-control" >
<option value="code128">Barcode </option>
<option value="qrcode">QR Code</option>
</select></td></tr>
<tr><td>Bar Text:</td><td><input id="symtext" class="form-control" type="text" style=""><input id="symaltx" type="hidden" style=""><input id="symopts" value="showborder" type="hidden" style=""></td>
</tr>
<tr><td colspan="2"><button class="btn btn-primary" id="render">Show Barcode</button> <a class="saveas" href="javascript:saveCanvas('image/png','.png')">Save As PNG</a>
<a class="saveas" href="javascript:saveCanvas('image/jpeg','.jpg')">Save As JPEG</a>
<a class="saveas" style="visibility:hidden" id="apiurl" href=""></a>
</td></tr>
</table>
<div id="content">
<canvas id="canvas" width=1 height=1 style="border:1px solid #fff;visibility:hidden"></canvas>
<div id="proof" style="position:relative;border:1px solid #fff"></div>
<div id="output" style="white-space:pre"></div>
</div>
<table id="tobehid" class="table table-hover table-condensed" style="visibility:hidden">
<tr><td>Scale X,Y:
<input type="hidden" id="scaleX" value=2>
<input type="hidden" id="scaleY" value=2></td></tr>
<tr><td>Image Rotation:
<label for="rotN"><input type="radio" name="rot" value="N"
id="rotN" checked>Normal</label>
<label for="rotR"><input type="radio" name="rot" value="R"
id="rotR">Right</label>
<label for="rotL"><input type="radio" name="rot" value="L"
id="rotL">Left</label>
<label for="rotI"><input type="radio" name="rot" value="I"
id="rotI">Invert</label></td></tr>
<tr><td>Font Rendering:
<label for="fontAnti"><input type="radio" name="font" value="A"
id="fontAnti" checked>Anti-Aliased</label>
<label for="fontMono"><input type="radio" name="font" value="M"
id="fontMono">Monochrome</label></td></tr>
</table>
</div>
</body>
<div class="footer">Copyright by <a href="https://www.linkedin.com/in/iamharistr">Hariram</a> <strong></strong></div>
</html>
<style>
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
color : #fff;
background-color: #000;
text-align: center;
}</style>
