Question

我正在创建条形码生成器。条形码生成成功。但我需要在图像上方和下方插入自定义文本。以下是我的代码。我想为它添加自定义文本。在图像的上方和下方添加文本后，我想在单击下载按钮时在图像中获得相同的文本和条形码。在此先感谢。

<!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>
        &nbsp;&nbsp;
        <a class="saveas" href="javascript:saveCanvas('image/jpeg','.jpg')">Save As JPEG</a>
        &nbsp;&nbsp;
        <a class="saveas"  style="visibility:hidden" id="apiurl" href=""></a>
        &nbsp;&nbsp;</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>

添加页眉和页脚文本并下载图像

0 个答案: