在 html Canvas 上方添加二维码

Question

我正在尝试将 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>

如有任何帮助，我们将不胜感激。

Answer 1

好的，根据您问题的更新，可以按如下方式实现。首先创建一个新的<img>标签

var img = document.createElement('img');
img.src = wot._el.firstChild.nextElementSibling.currentSrc;

然后注入到<canvas>

context.drawImage(img, 30, 100);

在 html Canvas 上方添加二维码

Add QR on top of html Canvas

javascript

html5-canvas

qr-code