圖像不與谷歌瀏覽

介質打印顯示我有打印使用圖像條碼爲每列（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

來源

2017-01-19 Luiz Felipe Weber

替代解決方案：使用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;

非常感謝@kreativekorp這個真棒PHP庫。

來源

2017-01-26 01:29:10

替代解決方案：使用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');

來源

2017-03-07 17:29:51

圖像不與谷歌瀏覽

回答

相關問題