二维码生成插件angular-qrious，生成canvas并提供下载

原创已于 2024-01-05 19:54:55 修改 · 328 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

于 2023-09-19 14:02:23 首次发布

Angular 专栏收录该内容

6 篇文章

订阅专栏

小编给大家分享一下js如何实现链接二维码生成，canvas保存图片为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.canvas保存为图片下载

  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