Covert QR code canvas to image

Question

我需要生成QR码并将其显示在优惠券上。我有一个打印链接。点击打印链接，我应该得到一个qrcode和其他一些细节的打印。

但我看到，无法使用JavaScript打印打印画布。

我需要将画布转换为图像，然后显示在凭证页面上，以便可以打印。

这里去的代码

<div class="qrcode${voucher.voucherId}" style="float:left;" > 
      <canvas width="100" height="100"></canvas>       
</div> 


$('.qrcode'+voucherid).qrcode({ 
           width: 100, 
           height: 100, 
           text: ""+voucherid+"", 
           size: 100 
          }); 

请建议。

Answer 1

这是我的代码，将页面中的第一个画布保存为png。 在谷歌浏览器中测试。

// Save first canvas object in current document to png. 

var canv = document.getElementsByTagName("canvas")[0], 
    zz = document.createElement("a"); 
zz.href = canv.toDataURL(); 
zz.setAttribute("download", "Canvas_" + (new Date).getTime() + ".png"); 
var myEvt = document.createEvent("MouseEvents"); 
myEvt.initEvent("click", !1, !0); 
zz.dispatchEvent(myEvt);