javascript - 使用 JS 将 JQuery 二维码转换为图像

Question

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

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

这是我的代码:

<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>

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

感谢任何帮助...

Answer 1

唯一的问题是您调用了 toDataURL() 函数，而不是针对 canvas 元素。 你可以用 jquery 获取 Canvas ，它就可以工作。

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+'"/>');
});