0
110
VistasAdd QR on top of html Canvas
I'm trying to load a QR code into HTML5 canvas on top of a background image but it's not working for whatever reason. If I change the QR code to a normal <img> it works fine but this is no good for my purposes.
I've tried a million variations but here's where I'm at right now:
setTimeout(function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var qr = document.getElementById('qrcode');
var imageObj = new Image();
var wot = new QRCode(document.getElementById("holder"), "www.example.com");
imageObj.onload = function(){
context.drawImage(imageObj, 0, 0);
qr.style.backgroundImage = "url(" + wot._el.firstChild.nextElementSibling.currentSrc + ")";
context.font = "30pt Arial";
context.fillStyle = "red";
context.fillText("QR Code should be here", 30, 100);
context.fillText("But it's not", 140, 400);
};
imageObj.src = "https://via.placeholder.com/500x500?text=Background+Image";
}, );<script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>
<div id="holder" style="display: none;"></div>
<div style="width:255px; height:255px" id="qrcode"></div>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>Any help would be appreciated.
·
Santiago Gelvez
1 Respuestas
Responde la pregunta0
OK so based on the update of your question its achievable as follows.
First create a new <img> tag
var img = document.createElement('img');
img.src = wot._el.firstChild.nextElementSibling.currentSrc;
Then inject in into the <canvas>
context.drawImage(img, 30, 100);
·
Santiago Gelvez
Denunciar
Responde la pregunta