Plug-in de geração de código QR angular-qrious, gera tela e fornece download

Índice

1. Instale dependências

2. Introdução ao AppModule

3.Introduzido na tag HTML

4.Salve a tela como download de imagem

---

O editor compartilhará com você como gerar códigos QR de link em js. O canvas salva a imagem no formato png e baixa-a localmente. Acredito que a maioria das pessoas não sabe muito sobre isso, então compartilho este artigo para sua referência. I espero que você termine de ler. Há muito a ganhar com este artigo, vamos descobrir juntos!

1. Instale dependências

npm install angular-qrious

2. Introdução ao AppModule

// Import library
import { QriousModule } from 'angular-qrious';

@NgModule({
  imports: [
    ...
    QriousModule
  ],
})
export class AppModule { }

3.Introduzido na tag HTML

<qr-code [value]="'Qrious'" [size]="124"></qr-code>

As seguintes renderizações:

4.Salve a tela como download de imagem

  download() {
    const canvas = document
      .getElementsByTagName("canvas")[0]
      .toDataURL("image/png");
    const link = document.createElement("a");
    link.setAttribute("href", canvas);
    link.setAttribute("download", "阳仔.png");
    link.click();
  }

no modelo html

 <button (click)="download()">下载二维码</button>

endereço do link do plug-in do github

https://github.com/FrankiePo/angular-qrious

Bem-vindo a comunicar na área de comentários.

Se o artigo for útil para você, ❤️Siga + Curta❤️incentive-o ! O blogueiro continuará atualizando. . . .

Texto original do meu blog: https://code-nav.top/article/235