我正在使用画布使用生成的用户 ID 绘制 qr，我在周围放置红色边框并显示它，但不显示 qr 本身。
这是我的另一张图，这个显示了，但 qr 没有。我把这个包括在内，以防我忽略了一些东西。
if (canvasBack.getContext) {
const ctx2 = canvasBack.getContext("2d");
ctx2.fillStyle = "#FFFFFF"; // white background color
// Fill the entire canvas with the background color
ctx2.fillRect(0, 0, canvasBack.width, canvasBack.height);
ctx2.font = "18px Arial";
ctx2.fillStyle = "black";
ctx2.fillText("1. This Library Card is non-transferable.",40,60);
ctx2.fillText("2. Library users are required to present their library",40,90);
ctx2.fillText(" card every time they use the library collections.",40,120);
ctx2.fillText("3. The loss of this ID card must be reported immediately.",40,150);
ctx2.fillText(" A replacement ID comes with a fee.",40,180);
ctx2.fillText("4. ID will be confiscated/cancelled for any false",40,210);
ctx2.fillText(" information given.",40,240);
ctx2.fillText("Person to be notified in case of emergency:",40,270);
ctx2.font = "bold 21px Arial";
ctx2.fillText("NAME:",55,320);
ctx2.fillText("ADDRESS:",55,360);
ctx2.fillText("CONTACT NO.:",55,400);
ctx2.fillText(users.contactName,250,320);
ctx2.fillText(users.contactAddress,250,360);
ctx2.fillText(users.contactNum,250,400);
ctx2.font = "bold 25px Arial";
ctx2.fillText("SIGNATURE",160,520);
ctx2.fillText("ABEL C. ICATLO",620,490);
ctx2.font = "italic 18px Arial";
ctx2.fillText("MUSEUM CURATOR I/OIC-LSD",590,520);
//blue
ctx2.beginPath();
ctx2.moveTo(1000, 1000);
ctx2.lineTo(0, 600);
ctx2.lineTo(0, 540);
ctx2.lineTo(500, 540);
ctx2.lineTo(650, 420);
ctx2.lineTo(970, 420);
ctx2.lineTo(1000, 400);
ctx2.lineTo(1000, 1000);
ctx2.stroke();
ctx2.fillStyle = "#002D624C";
ctx2.fill();
//yellow left bottom
ctx2.beginPath();
ctx2.moveTo(0, 540);
ctx2.lineTo(0, 520);
ctx2.lineTo(500, 520);
ctx2.lineTo(470, 540);
ctx2.lineTo(0, 540);
ctx2.stroke();
ctx2.fillStyle = "#FFFD374C";
ctx2.fill();
//yellow right bottom
ctx2.beginPath();
ctx2.moveTo(1000, 400);
ctx2.lineTo(700, 400);
ctx2.lineTo(670, 420);
ctx2.lineTo(970, 420);
ctx2.lineTo(1000, 400);
ctx2.stroke();
ctx2.fillStyle = "#FFFD374C";
ctx2.fill();
这是我使用id生成qr的地方，它没有任何错误。
let qrCanvas = document.createElement("canvas");
qrCanvas.width = 100;
qrCanvas.height = 100;
let qrcode = new QRCode(qrCanvas, {
text: userId,
width: 100,
height: 100,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
ctx2.drawImage(qrCanvas, 300, 80, 100, 100);
这是我使用的脚本，以防有帮助
<head>
<title>View Users</title>
<link rel="stylesheet" href="/Library User Creation/css/viewUsers.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/JsBarcode.all.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/davidshimjs/qrcodejs/qrcode.min.js"></script>
</head>
这是我的画布，这是第二个应该包含 qr 的画布。
<div id="cardModal" class="modal">
<div class="modal-content">
<span class="closecard">×</span>
<canvas id="sampleID" height="600" width="1000">
</canvas>
<canvas id="sampleIDback" height="600" width="1000">
</canvas>
<button id="btnSendCard">Send Card</button>
<button id="btnPrintCard">Print Card</button>
</div>
</div>
没关系，我解决了它，我只是用了这个：
let qrElement = document.createElement("div");
let qrcode = new QRCode(qrElement, {
text: userId,
width: 320,
height: 320,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
let qrImage = new Image();
qrImage.src = qrElement.firstChild.toDataURL(); // Convert SVG to data URL
qrImage.onload = function() {
ctx2.drawImage(qrImage, 610, 50, 320, 320);
};