html-二维码中间添加logo

直接看代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二维码中间添加logo</title>
    <script src="/static/js/qrcode.min.js"></script>
    <script src="/static/js/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js" integrity="sha512-NFUcDlm4V+a2sjPX7gREIXgCSFja9cHtKPOL1zj6QhnE0vcY695MODehqkaGYTLyL2wxe/wtr4Z49SvqXq12UQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

</head>
<body>
<div id="qrcode_img1_1"></div>

<script>
    function imgQR(qrCanvas, centerImage, factor) {
        var h = qrCanvas.height;
        //Center size
        var cs = h * factor;
        //Center offset
        var co = (h - cs) / 2;
        var ctx = qrCanvas.getContext("2d");
        ctx.drawImage(centerImage, 0, 0, centerImage.width, centerImage.height, co, co, cs, cs);
      }
      const icon = new Image();
      icon.onload = function () {
        var qrcode = new QRCode(document.getElementById("qrcode_img1_1"), {
          text: "https://docs.apipost.cn/preview/c1965f884871c5e8/022649a12cdf1ad7",
          width: 200,
          height: 200,
          colorDark: "#000000",
          colorLight: "#ffffff",
          correctLevel: QRCode.CorrectLevel.H
        });
        imgQR(qrcode._oDrawing._elCanvas, this, 0.2)
      }
    icon.src = "https://api.logo.com/api/v2/images?logo=lg_SrcDtUgd3mNUxVMgHD&width=128&height=128&fit=contain&margins=24&format=webp&quality=60&u=1731766083359"

</script>


</body>
</html>

好了，记录到这里，持续更新中。

记录问题也是一种修行。

书山有路勤为径，学海无涯苦作舟。

欢迎关注微信公众号：【乐知付加密平台】，您的网络资源可变现

一起学习，一起进步。