angular 自定義指令 實現二維碼加 logo

絕大多數組件沒有提供二維碼中間添加圖片的接口，而且查到如下資料

QR碼缺一部分或者被遮蓋一部分也能被正確掃描，要歸功於QR碼在發明時的「容錯度」設計，生成器會將部分信息重複表示（也就是冗餘）來提升其容錯度。QR碼在生成時能夠選擇四種程度的容錯度（可修正的字碼量），分別是L,M,Q,H，對應7%，15%，25%，30%的容錯度。也就是說，若是你在生成二維碼時選擇H檔容錯度，即便30%的圖案被遮擋，也能夠被正確掃描。這也就是爲何如今許多二維碼中央均可以加上LOGO。

因此

實現環境

angular7.0 angularx-qrcode

實現思路

開發者工具檢查生成的二維碼，發現組件下由一個隱藏的canvas，和圖片組成， 內容是相同的二維碼 （能夠猜測出，組件的實現方式就是用canvas生成二維碼） ，因此考慮獲取canvas在上面繪製logo.

實現代碼

import { AfterContentInit, AfterViewInit, Directive, DoCheck, ElementRef } from '@angular/core';
import { isNullOrUndefined } from 'util';


@Directive({
  // tslint:disable-next-line:directive-selector
  selector: '[spdVQr]'
})
export class SpdVQrDirective implements DoCheck {

  constructor(private el: ElementRef) {
  }
    
  ngDoCheck() {
    const canvas = this.el.nativeElement.querySelector('canvas');
    if (!isNullOrUndefined(canvas)) {
      const size = canvas.width;
      const logo = document.createElement('img');
      document.body.appendChild(logo);
      logo.setAttribute('src', '../../../assets/images/qr-logo.png');
      logo.setAttribute('style', 'display:none');
      canvas.getContext('2d').drawImage(logo, size * 0.35, size * 0.35, size * 0.3, size * 0.3);
      document.body.removeChild(logo);
      const image = this.el.nativeElement.querySelector('img');
      image.src = canvas.toDataURL('image/png');
    }

  }
}