如何让steeve:jquery-qrcode包生成的二维码可下载

Question

我有一个 Meteor 项目，其中每个用户都有一个个人资料页面，并且他们有自己的二维码链接到该页面。我想让我使用 steeve:jquery-qrcode 为他们生成的二维码可以 jpg 或 png 格式下载（如果可能的话）。

我将如何做到这一点？（即使其可从客户端下载）

目前我只是在页面上使用以下代码在用户页面上显示二维码：

<template name="profile">
  <div class="container-fluid">
    Username:   {{username}}<br />
    {{#with profile}}
        Profile name: {{firstName}} {{lastName}}
    {{/with}}
    <div id="qrblock"></div>
  </div>
</template>

这是客户端上的 JS：

Template.profile.onRendered(function () {
  console.log(this.data.qrUrl);
  $('#qrblock').qrcode({text: this.data.profile.qrUrl});
});

编辑：使用 img 元素而不是 div 元素会更容易实现吗？

Answer 1

我引用了以下 link：Download a Html5 canvas element as an image with the file extension with Javascript

<a id="downloadImgLink" onclick="$('#downloadImgLink').attr('href', $('#qrblock canvas')[0].toDataURL());" download="MyImage.png" href="#" target="_blank">Download Drawing</a>

将此 link 放在您视图中的任何位置。它应该将图像下载为 png 文件。

关于浏览器兼容性问题，IE和Safari暂不支持下载属性。这是一个 link 关于 download attribute.

如何让steeve:jquery-qrcode包生成的二维码可下载

How to make qr codes generated by steeve:jquery-qrcode package downloadable

jquery

qr-code

download