今回は TCPDF の内部クラスである TCPDF2DBarcode クラスを使って 二次元バーコード（QR-CODE） を直接ブラウザに（HTML出力）表示する方法について説明します。
以下の記事では TCPDF の内部的に画像データを生成する関数を直接呼出すことで、 二次元バーコード（QR-CODE） を画像ファイルとして出力ができることを記しました。
PHP TCPDFの内部クラスを利用して「QR-CODE」をPNGファイルに出力する方法について（TCPDF2DBarcodeクラス）
この時使用した getBarcodePngData メソッドとはことなり 二次元バーコード（QR-CODE） の白黒状態をHTMLのソースを 直接「div」タグの「style」の塗潰しで表現したものを返す getBarcodePngData メソッドを使用します。
言葉で説明しても良くわかりませんので、実際の例を以下に記します。
<?php
//include 2D barcode class
require_once('../tcpdf/tcpdf_barcodes_2d.php');
//二次元バーコードクラス生成
$str = "https://www.yahoo.co.jp/";
$barcodeobj = new TCPDF2DBarcode($str, 'QRCODE,H');
// output the barcode as HTML object
$barcodehtml = $barcodeobj->getBarcodeHTML(10, 10, 'black');
?>
<html>
<head>
<meta charset="utf-8">
<title>PDF barcode - 3</title>
</head>
<body>
<h2>PDF 出力</h2>
<div>
<?php echo($barcodehtml); ?>
</div>
</body>
</html>
特にソースは難しくはありません。これの実行した時のブラウザの結果は以下の通りです。
ブラウザに表示された結果のソースを見てみると、以下の様に「div」タグの羅列となっています。 背景色を黒にしてその幅を設定し塗潰すことでQR-CODEを表現しています。
getBarcodePngData メソッドの引数の最初の２個はQR-CODEの一番小さい素子の幅をピクセル値で指定しています。 この場合は「10px」なので画面上でみると一番小さい正方形の幅が「10px」になっています。
<html> <head> <meta charset="utf-8"> <title>PDF barcode - 3</title> </head> <body> <h2>PDF 出力</h2> <div> <div style="font-size:0;position:relative;width:290px;height:290px;"> <div style="background-color:black;width:10px;height:10px;position:absolute;left:0px;top:0px;"> </div> <div style="background-color:black;width:10px;height:10px;position:absolute;left:10px;top:0px;"> </div> <div style="background-color:black;width:10px;height:10px;position:absolute;left:20px;top:0px;"> </div> <div style="background-color:black;width:10px;height:10px;position:absolute;left:30px;top:0px;"> </div> <div style="background-color:black;width:10px;height:10px;position:absolute;left:40px;top:0px;"> </div> <div style="background-color:black;width:10px;height:10px;position:absolute;left:50px;top:0px;"> </div> <div style="background-color:black;width:10px;height:10px;position:absolute;left:60px;top:0px;"> </div> <div style="background-color:black;width:10px;height:10px;position:absolute;left:90px;top:0px;"> </div> <div style="background-color:black;width:10px;height:10px;position:absolute;left:110px;top:0px;"> </div> <div style="background-color:black;width:10px;height:10px;position:absolute;left:120px;top:0px;"> </div> <div style="background-color:black;width:10px;height:10px;position:absolute;left:140px;top:0px;"> </div> <div style="background-color:black;width:10px;height:10px;position:absolute;left:150px;top:0px;"> </div> <div style="background-color:black;width:10px;height:10px;position:absolute;left:160px;top:0px;"> </div> <div style="background-color:black;width:10px;height:10px;position:absolute;left:180px;top:0px;"> </div> <div style="background-color:black;width:10px;height:10px;position:absolute;left:200px;top:0px;"> </div> <div style="background-color:black;width:10px;height:10px;position:absolute;left:220px;top:0px;"> </div> <div style="background-color:black;width:10px;height:10px;position:absolute;left:230px;top:0px;"> </div> <div style="background-color:black;width:10px;height:10px;position:absolute;left:240px;top:0px;"> </div> <div style="background-color:black;width:10px;height:10px;position:absolute;left:250px;top:0px;"> </div> <div style="background-color:black;width:10px;height:10px;position:absolute;left:260px;top:0px;"> </div> <div style="background-color:black;width:10px;height:10px;position:absolute;left:270px;top:0px;"> </div> <div style="background-color:black;width:10px;height:10px;position:absolute;left:280px;top:0px;"> </div> // 全体として４１８行ありますので、この間は割愛 <div style="background-color:black;width:10px;height:10px;position:absolute;left:100px;top:280px;"> </div> <div style="background-color:black;width:10px;height:10px;position:absolute;left:120px;top:280px;"> </div> <div style="background-color:black;width:10px;height:10px;position:absolute;left:150px;top:280px;"> </div> <div style="background-color:black;width:10px;height:10px;position:absolute;left:190px;top:280px;"> </div> <div style="background-color:black;width:10px;height:10px;position:absolute;left:200px;top:280px;"> </div> <div style="background-color:black;width:10px;height:10px;position:absolute;left:210px;top:280px;"> </div> <div style="background-color:black;width:10px;height:10px;position:absolute;left:220px;top:280px;"> </div> <div style="background-color:black;width:10px;height:10px;position:absolute;left:240px;top:280px;"> </div> <div style="background-color:black;width:10px;height:10px;position:absolute;left:250px;top:280px;"> </div> <div style="background-color:black;width:10px;height:10px;position:absolute;left:270px;top:280px;"> </div> </div> </div> </body> </html>
PR
コメント