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