Question

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

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

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

<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

我引用了以下链接：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>

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

至于浏览器兼容性问题，IE和Safari尚不支持下载属性。这是一个关于download attribute的链接。

如何使由steeve生成的qr代码：jquery-qrcode包可下载

1 个答案: