代码之家 › 专栏 › 技术社区 › armd0202

使用JS将JQuery QR码转换为图像

qr-code jquery javascript

armd0202 · 技术社区 · 9 年前

我想知道如何下载JQuery生成的二维码或使用javascript转换为可下载的图像(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>

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

感谢任何帮助。。。

2 回复 | 直到 8 年前

Community CDub 8 年前

唯一的问题是您调用的是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+'"/>');
});

fuyushimoya 9 年前

在您的代码中

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, download 设置为所需的文件名,然后模拟单击。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="
https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>

<div id="output"></div>
<script>
jQuery(function(){
  jQuery('#output').qrcode("http://");
   
  // the lib generate a canvas under target, you should get that canvas, not #output
  // And put the code here would ensure that you can get the canvas, and canvas has the image.
  var canvas = document.querySelector("#output canvas");
  var img = canvas.toDataURL("image/png");
  $(canvas).on('click', function() {
    // Create an anchor, and set its href and download.
    var dl = document.createElement('a');
    dl.setAttribute('href', img);
    dl.setAttribute('download', 'qrcode.png');
    // simulate a click will start download the image, and name is qrcode.png.
    dl.click();
  });
   
  // Note this will overwrite any current content.
  // document.write('<img src="'+img+'"/>');
})

</script>