Question

我想知道如何使用javascript下载JQuery生成的QR码或转换为可下载的图像（png / jpeg）。

我尝试了这里的内容： Capture HTML Canvas as gif/jpg/png/pdf? 但没有成功。我认为这与输出有关。有一个表格和画布输出，但两者都不提供图像数据...

这是我的代码：

<script src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jquery.qrcode.js"></script>
<script type="text/javascript" src="js/qrcode.js"></script>

<div id="output"></div>
<script>
jQuery(function(){
    jQuery('#output').qrcode("http://");
})


var canvas = document.getElementById("output");
var img    = canvas.toDataURL("image/png");
document.write('<img src="'+img+'"/>');
</script>

此外，我希望在转换为图像以帮助检测之前用白色背景（在div中添加行和列）包围QR码（以便背景也包含在图像中）。

感谢任何帮助...

Answer 1

唯一的问题是你没有为canvas元素调用toDataURL（）函数。您可以使用jquery获取画布，它将起作用。

source

jQuery(function(){
    $('#output').qrcode("http://");

    var canvas = $('#output canvas');
    console.log(canvas);
    var img = canvas.get(0).toDataURL("image/png");
    //or
    //var img = $(canvas)[0].toDataURL("image/png");
    document.write('<img src="'+img+'"/>');
});

Answer 2

在您的代码中

var canvas = document.getElementById("output");
var img    = canvas.toDataURL("image/png");
document.write('<img src="'+img+'"/>');

将在jQuery('#output').qrcode("http://");之前执行，domready仅在页面上的每个元素都可访问时启动，并且scripts在加载时执行。所以他们也应该加入domready回调。

另一个问题是jquery.qrcode在目标下创建canvas，因此var canvas = document.getElementById("output");会找到div，而不是画布，您可以使用document.querySelector("#output canvas");来获取它。

如果你只想要一个可下载的图像，设置一个事件处理程序，然后当它被触发时，创建一个<a>并将href设置为canvas.toDataURL，{{ 1}}到你想要的文件名，然后模拟一次点击。

＆＃13;

download

＆＃13;

使用JS将JQuery QR Code转换为Image

2 个答案: