изображения не отображается в средствах массовой информации печати с 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 для изменения img в @media print.

Проблема: Chrome не печатает некоторые imgs (p.png).

1. Оригинальный штрих

2. Печать в Chrome

3. Печать в Firefox

Answer 1

Альтернативное решение: Используйте SVG для генерации штрих-кодов!

я нашел библиотеку, которая создает штрих-коды "МФТ без ошибок: 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; 

Большое спасибо @kreativekorp для этой удивительной библиотеки PHP.

Answer 2

Альтернативное решение: Использование Javascript холст, чтобы решить эту проблему.

создать код 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');