css - 使用 Google Chrome 时图像不会显示在媒体打印品中

Question

我有一个应用程序，它使用每列图像 (p.png) 和相同的间距 (b.png) 打印条形码，如下所示:

<img src="imagens/p.png" width="1" height="50" border="0">
<img src="imagens/b.png" width="1" height="50" border="0">
<img src="imagens/p.png" width="1" height="50" border="0">
<img src="imagens/b.png" width="2" height="50" border="0">
<img src="imagens/p.png" width="2" height="50" border="0">
[...]

我没有使用任何 css 来更改 @media print 中的 img。

问题是:Chrome 不打印一些 imgs ( p.png )。

<强>1。原始条码

<强>2。在 Chrome 中打印

<强>3。在 Firefox 中打印

Answer 1

备选方案:使用javascript canvas来解决这个问题。

我在 codePen 中创建了一个可在所有浏览器中使用的代码:

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');