Images doesn't show in media print with Google Chrome - css

Question

I have an application which prints barcodes using images for each column (p.png) and the same for spacing (b.png) as follow:
<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">
[...]
I didn't use any of css to change img in #media print.
The problem is: Chrome doesn't print some imgs ( p.png ).
1. Original barcode
2. Print in Chrome
3. Print in Firefox

Answer 1

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

Answer 2

Alternative Solution: Use SVG to generate your barcodes!
I found a library to which creates 'ITF' barcodes without errors: 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.