使用JS将JQuery个二维码转为图片

Question

我想知道如何使用 javascript.

下载 JQuery 生成的二维码或转换为可下载的图像 (png/jpeg)

我尝试了这里的内容： Capture HTML Canvas as gif/jpg/png/pdf? 但没有成功。我认为这与输出有关。有一个 table 和 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

在你的代码中

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，而不是 canvas，您可以使用 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>

Answer 2

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

使用JS将JQuery个二维码转为图片

Convert JQuery QR Code to Image using JS

javascript

jquery

qr-code