I am trying to generate a QR code using davidshimjs/qrcodejs with the code below. But, when i try to generate DataURL, it gives following error :
TypeError: document.getElementById(...).toDataURL is not a function
Below is my code:
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();
I am trying to generate a QR code using davidshimjs/qrcodejs with the code below. But, when i try to generate DataURL, it gives following error :
TypeError: document.getElementById(...).toDataURL is not a function
Below is my code:
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();
2 Answers
Reset to default 6That's because toDataURL only works on the <canvas> element.
canvas.toDataURL(type, encoderOptions);
See: https://developer.mozilla/en-US/docs/Web/API/HTMLCanvasElement/toDataURL
UPDATE
Here is how you would get the data 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./davidshimjs/qrcodejs/master/qrcode.js"></script>
<div id="qrcode"></div>
<div id="result"></div>Simple solution
Include the library in <head> tag
<script type="text/javascript" src="https://cdn.rawgit./davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>
A simple function which converts a text to its equivalent QR image data URL.
function textToQrImageDataUrl(txt) {
var qrDiv = document.createElement("div");
// This will put a <canvas> inside the given <div> element, and draw
// the QR image on it
new QRCode(qrDiv, txt);
return qrDiv.querySelector('canvas').toDataURL();
}
Test it in HTML
<img id="qrImg" src="#">
<script type="text/javascript">
// This will use the same javascript function that I have defined above
var imgDataUrl = textToQrImageDataUrl("abcd");
document.getElementById('qrImg').setAttribute("src", imgDataUrl);
</script>