Latest Chrome update and print is messed up?

Question

I can't pin it down to a very specific timeframe beyond knowing that in the last month or so, something has changed in chrome such that when I print from the chrome browser the text and other items become unreadeable and choppy when printed out. When printing from anything else, the same document comes out great. The documents look great in the dialog, but it's when it's printed to the page, it looks terrible.

• I'm initiating the prints in my javascript.
• It's actually base64 images that I'm printing that look bad.
• I'm printing to a thermal printer.
• Barcodes on the printed page are choppy.
• Text is somewhat unreadable.
• Worked perfectly before a month ago.

Answer 1

We have this problem with chrome recently. We see some solutions and I think canvas is a good one.

Alternative solution : Use javascript canvas to solve this problem.

I create a code in codePen for use in all browsers:

https://codepen.io/eltonsrc/pen/OpXyrQ

HTML :

<div style="width: 600px">
  <canvas id="barcode" class="barcode">
    Code for browsers without canvas support. For example:
    <img src="blackBar.gif" width="1" height="50">
    <img src="whiteBar.gif" width="1" height="50">
  </canvas>
</div>

CSS :

.barcode {
  width: 100%;
  height: 50px;
}

Javascript :

var barCode = (function (){
  this.WHITE = 'rgb(255, 255, 255)';
  this.BLACK = 'rgb(0, 0, 0)';
  this.THIN_BAR = 1;
  this.THICK_BAR = 3;

  this.lastPixel = 0;

  this.drawBar = function (barWidth, color) {
    this.ctx.fillStyle = color;
    this.ctx.fillRect(this.lastPixel, 0, barWidth, this.canvas.height);
    this.lastPixel += barWidth;
  };

  this.draw2of5BarCode = function (barcodeNumber) {
    var barCodes = ['00110', '10001', '01001', '11000', '00101', '10100', '01100', '00011', '10010', '01010'];

    for (var f1 = 9; f1 >= 0; f1--) {
      for (var f2 = 9; f2 >= 0; f2--) {
        var f = f1 * 10 + f2;
        var texto = '';
        for (var i = 0; i < 5; i++) {
          texto += barCodes[f1].substr(i, 1) + barCodes[f2].substr(i, 1);
        }
        barCodes[f] = texto;
      }
    }

    // begin of barcode
    this.drawBar(this.THIN_BAR, this.BLACK);
    this.drawBar(this.THIN_BAR, this.WHITE);
    this.drawBar(this.THIN_BAR, this.BLACK);
    this.drawBar(this.THIN_BAR, this.WHITE);

    if (barcodeNumber.length % 2 != 0) {
      barcodeNumber = '0' + barcodeNumber;
    }

    do {
      var i = Number(barcodeNumber.substr(0, 2));
      if (barcodeNumber.length == 2) {
        barcodeNumber = '';
      } else {
        barcodeNumber = barcodeNumber.substr(2, barcodeNumber.length - 2);
      }

      var f = barCodes[i];

      for (i = 0; i < 10; i += 2) {
        if (f.substr(i, 1) == '0') {
          this.drawBar(this.THIN_BAR, this.BLACK);
        } else {
          this.drawBar(this.THICK_BAR, this.BLACK);
        }

        if (f.substr(i + 1, 1) == '0') {
          this.drawBar(this.THIN_BAR, this.WHITE);
        } else {
          this.drawBar(this.THICK_BAR, this.WHITE);
        }
      }
    } while(barcodeNumber.length > 0);

    this.drawBar(this.THICK_BAR, this.BLACK);
    this.drawBar(this.THIN_BAR, this.WHITE);
    this.drawBar(this.THIN_BAR, this.BLACK);
  }

  this.drawBarcode = function (canvasId, barcodeNumber) {
    this.canvas = document.getElementById(canvasId);

    // verify canvas support
    if (!this.canvas.getContext) {
      return;
    }

    this.lastPixel = 0;
    this.ctx = this.canvas.getContext('2d');
    this.draw2of5BarCode(barcodeNumber);
  };

  return this;
})();

barCode.drawBarcode('barcode', '856000000005227702201707619934651263800000000003');