jQuery.qrcode で余白を作る

jQuery.qrcode で作成した QRコードには余白がない

画面でそのまま表示するのであれば css でマージンなどを与えておけばいいが、ダウンロード目的だと都合が悪い

left とか top とかのオプションが存在するらしいので試してみるが反応なし(先にcanvasを作成しても)

ソースをいじるのも後々面倒なので、並べて Canvasを作成して余白付きでコピーすることに

• コードを実際に生成させる側の div(下記では qrCodeSrc)を、display:none: で非表示にしておく
• qeCodeDst を並べて置いて、こちらの canvas へコピー
• canvasDst 側は余白を加味したサイズにしておく
• putImageData で余白分ずらして貼り付ける(x=20, y=20)

HTML側

Javascript側

// qr生成
qrCodeSrc.innerHTML = '';
$('#qrCodeSrc').qrcode({width:120, height:120, text:'test code'});

// qrコピー
var srcCanvas = $('#qrCodeSrc canvas')[0];
var image = srcCanvas.getContext('2d').getImageData(0, 0, srcCanvas.width, srcCanvas.height);
canvasDst.getContext('2d').putImageData(image, 20, 20);