下載PHP中使用JS腳本生成的二維碼

Question

我想要生成的二維碼的下載按鈕，但是 canvas 僅在生成圖像時出現。 關於如何放置下載按鈕的任何提示？

這是我的項目的示例代碼

PHP：

<div>
    <!-- <input type="text" id="qr-data" value="<?php echo uniqid();; ?>"/> -->
    <button onclick="generateQR()">Generate</button>
    <div id="qrcode"></div>
    <script src="qrcode.min.js"></script>
</div>

JS腳本：

<script>
    var qrdata = document.getElementById("qr-data");
    var qrcode = new QRCode(document.getElementById("qrcode"));

    function generateQR() {
        var data = qrdata.value;
        qrcode.makeCode(data);
    }
</script>

我使用了JavaScript庫作為 QR 碼，這是該庫的鏈接。

Answer 1

工作 JSFiddle （StackOverflow 片段似乎不支持長數據編碼的 PNG src）。 我從庫文檔中的示例中復制了生成的 QR 和 HTML 源。

您需要先添加一個按鈕：

<a id="download" href="" download="qr.png"><button>Download</button></a>

然后，我們只需將生成的圖像 src 復制到鏈接href中。 一個問題是我們需要等待生成二維碼才能將其復制到鏈接中。 因此，讓我們在單擊按鈕時執行所有操作。

var link = document.getElementById("download");

// Add an event listener that will fire our code when the link is clicked
link.addEventListener("click", setUpDownload);

// Grab the generated img src, and copy it into the link href
function setUpDownload() {
    var image = document.getElementsByTagName("img"),
        qr = image[0].src;
    link.href = qr;
}