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');
    }

  }
}