在 html Canvas 上方添加二维码
Add QR on top of html Canvas
我正在尝试将 QR 码加载到背景图像顶部的 HTML5 canvas 中,但不知为何无法正常工作。如果我将 QR 码更改为正常的 <img>
它可以正常工作,但这对我的目的不利。
我已经尝试了上百万种变体,但这是我现在所处的位置:
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>
如有任何帮助,我们将不胜感激。
好的,根据您问题的更新,可以按如下方式实现。
首先创建一个新的<img>
标签
var img = document.createElement('img');
img.src = wot._el.firstChild.nextElementSibling.currentSrc;
然后注入到<canvas>
context.drawImage(img, 30, 100);
我正在尝试将 QR 码加载到背景图像顶部的 HTML5 canvas 中,但不知为何无法正常工作。如果我将 QR 码更改为正常的 <img>
它可以正常工作,但这对我的目的不利。
我已经尝试了上百万种变体,但这是我现在所处的位置:
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>
如有任何帮助,我们将不胜感激。
好的,根据您问题的更新,可以按如下方式实现。
首先创建一个新的<img>
标签
var img = document.createElement('img');
img.src = wot._el.firstChild.nextElementSibling.currentSrc;
然后注入到<canvas>
context.drawImage(img, 30, 100);