网页前端js使用jquery.qrcode插件实现生成带图标的二维码

DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://www.yuantk.com/assets/css/main.css">
head>

<body>
    <div class="row uniform">
        <div class="12u$">
            <input type="text" name="qr-message" id="qr-message" placeholder="请输入二维码文本信息 文本或者链接（例如：http://www.yuantk.com）"  />
        div>
        <div class="12u$">
            Logo图像
            <img id="logoImg" style="vertical-align: middle; max-width: 30px; max-height: 30px;" />
            <input type="file" id="logoImgSrc" accept="image/jpeg,image/jpg,image/png" />
        div>
        <div class="12u$" id="qrcodeDiv">
        div>
        <div class="12u$">
            <button id="start" class="special">
                生成二维码button>
        div>
    div>


    <script defer="defer">

        window.onload = loadtool;
        
        function loadtool() {

            var ad = document.createElement("script");
            ad.src = "https://cdn.bootcdn.net/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(ad, s);


            $("#logoImgSrc").change(function() {
                loadImg(this);
            });

            function loadImg(input_file) {
            
                if (typeof (FileReader) === 'undefined') 
                {
                    layer.msg("抱歉，你的浏览器不支持 FileReader，不能将图片转换为Base64，请使用现代浏览器操作！");
                }
                else {
                    try {
                        /*图片转Base64 核心代码*/
                        var file = input_file.files;
                        for (var i = 0; i < file.length; i++) {
                            //这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件
                            if (!/image\/\w+/.test(file[i].type)) {
                                layer.msg("请确保文件为图像类型");
                                return false;
                            }
                            var reader = new FileReader();
                            reader.onload = function() {
                                $("#logoImg").attr("src", this.result);
                                // load(this.result);
                            }
                            return reader.readAsDataURL(file[i]);
                        }
                    } catch (e) {
                        layer.msg('图片转Base64出错啦！' + e.toString())
                    }
                }
            }


            $("#start").click(function() {

                $("#qrcodeDiv canvas").remove();

                var qrmessage = $("#qr-message").val();
                var logoImg = $("#logoImg")[0];

                if (qrmessage == "") {
                    layer.msg("请输入二维码文本信息");
                    return;
                }
                if (typeof ($("#logoImg").attr("src")) == "undefined") {
                    layer.msg("请选择logo图标信息");
                    return;
                }


                //计算宽，高，中心坐标，logo大小
                var width = 200;
                var height = 200;
                var x = width * 0.4;
                var y = height * 0.4;
                var lx = width * 0.2;
                var ly = height * 0.2;
                //生成二维码
                $("#qrcodeDiv").qrcode({
                    width: width,
                    height: height,
                    text: qrmessage
                });
                //画logo
                var canvas = $("canvas")[0];

                canvas.getContext("2d").drawImage(logoImg, x, y, lx, ly);

            });

        }

    script>
body>
html>
<script defer="defer" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js">script>
使用效果演示传送门：
在线生成带Logo的二维码工具