ngx-kjuaを使ったQRコード生成で余分な空白が生成される

ngx-kjuaを使うと、簡単にQRコードが生成できるのですが、QRコードに組み込む文字列によって、生成されるQRコードの周辺に余白がパディングされる場合がありました。 見栄えが良くないので直したかったのですが、何が原因なのかさっぱりわかりませんでした。

文字列によって、周りに余白が入る

しかし、別のQRコードライブラリでも同じような現象があるようで、その内容が解決の役に立ちました。とりあえずの回避策としては、QRコードを大きめにレンダリングして、それを縮小すれば良いようです。元々300x300pixでQRコードを生成していたのですが、600x600pixでQRコードを生成して、canvasに半分のサイズで描画するようにしました。確かに、この回避策で余計なパディングが入らなくなりました。

HTML

<canvas height="{{canvas_size}}" id="c_qr" width="{{canvas_size}}"></canvas>
<div hidden="hidden">
  <ngx-kjua 
          [render]="'image'" [size]="qr_gen_size" [minVersion]="5"
          [text]="qr_text" [mode]="'label'" [label]="label_text"
          [mSize]="8" [fontcolor]="label_color" >

  </ngx-kjua>
</div>

TypeScript

export class QrComponent implements OnInit {
  // QR settings
  fontweight = "bold";
  qr_gen_size = 600;  // QRコードは600x600で生成
  canvas_size = this.qr_gen_size/2; // Canvasには1/2のサイズで転送する
  qr_text: string;

  // ngx-kjuaのQRコード生成後に実行する
  reduceSize() {
    let img = document.getElementsByTagName('img');
    let canvas = document.getElementById('c_qr');
    let context = (canvas as any).getContext("2d");
    context.drawImage(img[0], 0, 0, this.qr_gen_size,this.qr_gen_size,
                      0, 0,
        this.canvas_size,this.canvas_size);
  }

}