QR 코드 생성 플러그인 Angle-qrious, 캔버스 생성 및 다운로드 제공

목차

1. 종속성 설치

2.AppModule 소개

3.Html 태그에 도입

4.캔버스를 이미지 다운로드로 저장

---

js에서 링크 QR 코드를 생성하는 방법을 에디터가 알려드릴 것입니다. 캔버스는 이미지를 png 형식으로 저장하고 로컬로 다운로드합니다. 대부분의 사람들이 이에 대해 잘 모른다고 생각하므로 참고용으로 이 글을 공유합니다. 이 글을 끝까지 읽어보시기 바랍니다. 이 글에서 얻을 수 있는 것이 많으니 함께 알아봅시다!

1. 종속성 설치

npm install angular-qrious

2.AppModule 소개

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

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

3.Html 태그에 도입

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

다음 렌더링:

4.캔버스를 이미지 다운로드로 저장

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

HTML 템플릿에서

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

github 플러그인 링크 주소

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

댓글 영역에서 소통하는 것을 환영합니다.

글이 도움이 되셨다면 ❤️팔로우 + 좋아요❤️ 격려 부탁드립니다 ! 블로거는 계속해서 업데이트할 예정입니다. . . .

내 블로그 원문: https://code-nav.top/article/235