QR码到dataURL

时间:2016-08-11 15:32:35

标签: javascript qr-code

我正在尝试使用davidshimjs/qrcodejs生成QR码,代码如下。但是,当我尝试生成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();

1 个答案:

答案 0 :(得分:2)

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

canvas.toDataURL(type, encoderOptions);

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

更新

以下是获取数据网址的方法......

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>