jQuery.qrcode で余白を作る

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

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

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

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

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

HTML側

view plainprint?

1. <div id="qrCodeSrc" style="display: none;"></div>  
2. <div id="qrCodeDst"><canvas id="canvasDst" height="160px" width="160px"></canvas></div>  

Javascript側

view plainprint?

1. // qr生成  
2. qrCodeSrc.innerHTML = '';  
3. $('#qrCodeSrc').qrcode({width:120, height:120, text:'test code'});  
4.   
5. // qrコピー  
6. var srcCanvas = $('#qrCodeSrc canvas')[0];  
7. var image = srcCanvas.getContext('2d').getImageData(0, 0, srcCanvas.width, srcCanvas.height);  
8. canvasDst.getContext('2d').putImageData(image, 20, 20);  

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