图像不显示在媒体打印 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

替代解决方案：使用 SVG 生成条形码！

我找到了一个可以创建 'ITF' 条形码且没有错误的库：https://github.com/kreativekorp/barcode

include 'barcode.php';

$generator = new barcode_generator();

/* Generate SVG markup. */
$symbology = 'itf';
$data = '23790198019000000053081017674607670300000001000';
$options['w'] = '50';
$options['p'] = '2';
$svg = $generator->render_svg($symbology, $data, $options);
echo $svg;

Many thanks to @kreativekorp for this awesome php library.

Answer 2

替代方案：使用javascriptcanvas来解决这个问题。

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

图像不显示在媒体打印 Google Chrome

Images doesn't show in media print with Google Chrome

css

printing

google-chrome

barcode