二维码转dataURL

Question

我正在尝试使用 davidshimjs/qrcodejs 和下面的代码生成二维码。但是，当我尝试生成 DataURL 时，出现以下错误：

TypeError: document.getElementById(...).toDataURL 不是函数

下面是我的代码：

HTML :

<div id="qrcode"></div>

JS :

var qrcode = new QRCode("qrcode", {
    text: QRId,
    width: 200,
    height: 200,
    colorDark : "#000000",
    colorLight : "#ffffff",
    correctLevel : QRCode.CorrectLevel.H
});
var dataURL = document.getElementById('qrcode').toDataURL();

Answer 1

那是因为 toDataURL 仅适用于 <canvas> 元素。

canvas.toDataURL(type, encoderOptions);

参见：https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL

更新

这是获取数据的方式URL...

var QRId = "123456789"
var qrcode = new QRCode("qrcode", {
    text: QRId,
    width: 200,
    height: 200,
    colorDark : "#000000",
    colorLight : "#ffffff",
    correctLevel : QRCode.CorrectLevel.H
});

// get the qr div, then find the canvas element inside it
var canvas = document.getElementById('qrcode').querySelector('canvas');

var dataURL = canvas.toDataURL();

document.getElementById('result').innerHTML = dataURL;

<script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/master/qrcode.js"></script>

<div id="qrcode"></div>

<div id="result"></div>

二维码转dataURL

QR code to dataURL

javascript

qr-code

更新