如何把erwm变成像qrcodeimg一样的图片，在原来的位置上显示成图片

Question

// 引入二维码/复制插件
document.write("<script src='../../lib/jquery.qrcode.min.js?v=1.34'></script>");
document.write("<script src='../../lib/clipboard.min.js'></script>");
document.write("<script src='../../js/common/wxxcx.js?v=2019.11.21.18'></script>");
document.write("<script src='../../lib/html2canvas.js?v=1.34'></script>");
$("#mask").before('<div class="qr_suspend"><div class="con_qr"><img id="my_close" src="../../images/icon_myclose.png" alt=""><div class="erwm"><p class="ewm_pname"></p><div class="ewm_add"><div class="ewm_addxing"><div class="ewm_addcalc"></div><p class="ewm_addcalc_name"></p></div></div><div class="ewm_info"><div class="ewm_info_addxing"><div class="ewm_addcalc"></div><p>交费期：<span class="ewm_num"></span></p></div><div class="ewm_info_addxing"><div class="ewm_addcalc"></div><p>保额：<span class="ewm_amount"></span>元</p></div><div class="ewm_info_addxing"><div class="ewm_addcalc"></div><p>首年合计保费：<span class="ewm_premium"></span>元</p></div></div><div id="output"><div class="outputline"><img id="qrcodeimg" src=""><div id="qrcode"></div></div><p>链接</p></div></div><p class="copy-links"><span class="btn copy-button" data-clipboard-text="1">复制链接</span></p><p id="desc">长按保存或者转发，建议不要直接<br>扫码，防止中途退出</p></div></div>')

link = commonurl_front + "ank.html?&special_apply_no=" + special_apply_no;
    // var risk_name = document.querySelector('.common_table_fl.main_risk').textContent.trim();
    $("#qrcode").empty().hide();
    var widthq = $(document ).width() / 2.5;
    var qrcode = new QRCode(document.getElementById("qrcode"), {
        width: widthq,
        height: widthq,
        correctLevel: QRCode.CorrectLevel.L
    });
    qrcode.makeCode(link);
    // 等待QRCode完全渲染
    setTimeout(function() {
        // 隐藏原始二维码图片
        $("#qrcode img").hide();
        // 获取原始canvas
        var originalCanvas = document.getElementById('qrcode').getElementsByTagName('canvas')[0];
        if (!originalCanvas) {
            console.error("未找到原始二维码canvas");
            return;
        }
        // 创建最终canvas
        var newCanvas = document.createElement('canvas');
        newCanvas.width = widthq;
        newCanvas.height = widthq;
        // 获取上下文
        var ctx = newCanvas.getContext('2d');
        // 绘制白色背景
        ctx.fillStyle = '#ffffff';
        ctx.fillRect(0, 0, newCanvas.width, newCanvas.height);
        // 将原始二维码绘制到新canvas
        ctx.drawImage(originalCanvas, 0, 0, widthq, widthq);
        // 加载并绘制logo
        var img = new Image();
        img.src = "../../images/logo.png";
        img.onload = function() {
            // 绘制logo
            var logoWidth = 40;
            var logoHeight = 25;
            var logoX = (widthq - logoWidth) / 2;
            var logoY = (widthq - logoHeight) / 2;
            // 重新获取上下文以确保状态正确
            ctx = newCanvas.getContext('2d');
            ctx.drawImage(img, logoX, logoY, logoWidth, logoHeight);
            // 转换为图片
            var newCanvasDataURL = newCanvas.toDataURL("image/png");
            // 先设置容器样式
            $(".outputline").css({
                'min-height': widthq + 'px',
            });
            $("#qrcodeimg").css({ 
                height: widthq, 
                width: widthq 
            });
            // 设置图片源
            $("#qrcodeimg").attr("src", newCanvasDataURL);
            if(!isWeixin) {
                $(".qr_suspend").show();
                $("#qrcode").show();
            }
        };
    }, 100);

function ewmAjax() {
    var ewmdata={
        "seed": seed,
        "plan": "",
      
    }
    $.ajax({
        type: 'POST',
        url: commonurl + 'qrcode/tip/query',
        data: JSON.stringify(ewmdata),
        timeout: 30000,
        dataType: 'json',
        contentType: "application/json",
        success: function (req) {
            $(".ewm_amount").text(req.risks[0].amount_insured);
            $(".ewm_premium").text(req.premium);
            $(".ewm_pname").text(req.risks[0].risk_short_name);
            var paymentPeriodValue = req.risks[0].payment_period_value;
            var paymentPeriodText = "";
            if (paymentPeriodValue === "1") {
                paymentPeriodText = "一次";
            } else if (paymentPeriodValue) {
                paymentPeriodText = paymentPeriodValue + "提交";
            }
            $(".ewm_num").text(paymentPeriodText);
            // 获取.ewm_add容器
            var $ewmAddContainer = $(".ewm_add");
            if ($ewmAddContainer.length > 0) {
                // 清空.ewm_addxing内部的所有内容
                $ewmAddContainer.find('.ewm_addxing').remove();
                // 检查是否有险种数据
                if (req.risks && req.risks.length > 0) {
                    // 循环创建每个险种的.ewm_addxing展示块
                    $.each(req.risks, function(index, riskItem) {
                        // 忽略第一个元素（索引0），从第二个元素（索引1）开始
                        if (index > 0) {
                            var html = '<div class="ewm_addxing">' +
                                            '<div class="ewm_addcalc"></div>' +
                                            '<p class="ewm_addcalc_name">' + riskItem.risk_short_name + '</p>' +
                                        '</div>';
                                        // 将.ewm_addxing插入到.ewm_add容器内
                                        $ewmAddContainer.append(html);
                        }
                    });
                }
                // 控制显示/隐藏
                if (req.risks && req.risks.length == 1) {
                    $(".ewm_add").hide();
                } else {
                    $(".ewm_add").show();
                }
    }
        },
        complete: function (XMLHttpRequest, status) {
            if (status == 'timeout') {
                $('#loadingToast').hide();
                $("#errInfo").show();
            }
        },
        error: function (xhr, type) {
            hxui.toast("网络请求出错");
            $('#loadingToast').hide();
        }
    });
}

/* 二维码 */
#output {
  height: 8.4rem; 
  width: 9rem;
}
/* 二维码样式 */
.erwm{
    background: linear-gradient( 355deg, #D4F2FF 0%, #EBFFFF 100%);
    /* padding-bottom: 0.8rem; */
}
.erwm .ewm_pname{
    font-weight: 600;
    font-size: 0.72rem;
    color: #167AFF;
    text-align: center;
    height: 2.4rem;
    line-height: 3rem;
    width: 100%;
    background: url(../images/ewm_bg.png) no-repeat;
  background-size: 100% 100%;
    margin-bottom: .72rem;
}
#output {
    background: url(../images/ewm_line.png) no-repeat;
    background-size: 100% 100%;
    padding: .56rem .78rem 0rem;
    border: none;
    /* padding-bottom: 0.8rem; */
}
#output .outputline{
    padding: .56rem;
    background-color: #FFFFFF;
    border-radius: 0.2rem;
}
#output p{
    font-weight: 400;
    font-size: .48rem;
    color: #010002;
    line-height: .78rem;
    margin-top: .6rem;
    text-align: center;
}
#desc{
    margin-top: .28rem;
}

.ewm_info,.ewm_add{
    background-color: #FFFFFF;
    width: 92%;
    margin: 0 auto;
    display: flex;
    padding: .32rem 0.2rem 0.32rem 1rem;
    box-sizing: border-box;
    font-size: .48rem;
  line-height: .7rem;
    text-align: left;
    border-radius: .38rem;
}
.ewm_add{
    flex-wrap: wrap; /* 允许换行 */
    gap: 10px; /* 元素间距 */
  color: #167AFF;
}

.ewm_add .ewm_addxing {
    flex: 1 0 calc(40%);
    box-sizing: border-box;
    
    margin: 0;
    min-width: 0; /* 防止内容溢出 */
}
.ewm_addxing{
    display: flex;
    align-items: center;
}
.ewm_addcalc{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2FAEFF;
    margin-right: .4rem;
}
.ewm_info{
    flex-direction: column;
    margin-top: .4rem;
    margin-bottom: .8rem;
    color: #444444;
}
.ewm_info_addxing{
    display: flex;
    align-items: center;
}
.qr_suspend {
    padding-top: 16% !important;
}
.erwm {
    background: linear-gradient(355deg, #D4F2FF 0%, #EBFFFF 100%);
    padding-bottom: 0.8rem;
}

Answer 1

晚上好🌙🌙🌙
本答案参考通义千问

要将 #qrcode 生成的二维码 转换为图片，并在原位置上显示成图片（如 #qrcodeimg），你可以通过以下步骤实现。这个过程主要涉及使用 html2canvas 或直接操作 DOM 和 Canvas 来完成。

---

✅ 目标：

• 将 QRCode 插件生成的二维码渲染为图片；
• 替换掉原来的 #qrcode 元素，使其以图片形式显示；
• 保持样式和布局不变。

---

🔧 解决方案步骤：

1. 确保 QRCode 已经正确渲染
   在生成二维码后，等待一段时间（比如 setTimeout）以确保 QRCode 完全绘制完毕。

2. 获取 QRCode 的 canvas 元素
   使用 JavaScript 获取生成的 QRCode 所在的 <div> 中的 <canvas> 元素。

3. 创建新的 Canvas 并绘制二维码内容
   创建一个新的 canvas，并将原始 QRCode 内容绘制到新 canvas 上，以便后续处理。

4. 添加 Logo（可选）
   如果需要在二维码中添加 logo，可以使用 Image() 对象加载 logo 图片并将其绘制到 canvas 上。

5. 将 canvas 转换为图片数据 URL
   使用 toDataURL("image/png") 方法将 canvas 转换为 base64 格式的图片数据。

6. 替换原有元素为图片
   将 #qrcodeimg 的 src 设置为上述生成的图片数据 URL。

7. 隐藏或移除原始 QRCode 元素
   避免重复渲染或布局混乱。

---

📦 代码修改示例：

// 假设 link 是你想要生成二维码的链接
var link = commonurl_front + "ank.html?&special_apply_no=" + special_apply_no;

// 清空 #qrcode 并生成二维码
$("#qrcode").empty().hide();
var widthq = $(document).width() / 2.5;
var qrcode = new QRCode(document.getElementById("qrcode"), {
    width: widthq,
    height: widthq,
    correctLevel: QRCode.CorrectLevel.L
});
qrcode.makeCode(link);

// 等待 QRCode 渲染完成
setTimeout(function () {
    // 获取原始 canvas
    var originalCanvas = document.getElementById('qrcode').getElementsByTagName('canvas')[0];
    if (!originalCanvas) {
        console.error("未找到原始二维码 canvas");
        return;
    }

    // 创建新 canvas
    var newCanvas = document.createElement('canvas');
    newCanvas.width = widthq;
    newCanvas.height = widthq;
    var ctx = newCanvas.getContext('2d');

    // 绘制白色背景
    ctx.fillStyle = '#ffffff';
    ctx.fillRect(0, 0, newCanvas.width, newCanvas.height);

    // 绘制二维码
    ctx.drawImage(originalCanvas, 0, 0, widthq, widthq);

    // 可选：添加 logo
    var img = new Image();
    img.src = "../../images/logo.png";
    img.onload = function () {
        var logoWidth = 40;
        var logoHeight = 25;
        var logoX = (widthq - logoWidth) / 2;
        var logoY = (widthq - logoHeight) / 2;

        // 重新获取上下文
        ctx = newCanvas.getContext('2d');
        ctx.drawImage(img, logoX, logoY, logoWidth, logoHeight);

        // 将 canvas 转换为图片数据
        var newCanvasDataURL = newCanvas.toDataURL("image/png");

        // 设置图片 src
        $("#qrcodeimg").attr("src", newCanvasDataURL);
        $("#qrcodeimg").css({ 
            height: widthq, 
            width: widthq 
        });

        // 隐藏原始 QRCode
        $("#qrcode").hide();

        // 显示图片
        $("#qrcodeimg").show();
    };
}, 100);

---

⚠️ 注意事项：

• 跨域问题： 如果 logo 图片来自其他域名，请确保服务器允许跨域访问。
• 性能优化： 大尺寸的二维码可能会导致性能下降，建议适当控制 widthq 的大小。
• 兼容性： QRCode.js 和 html2canvas 在某些浏览器中可能表现不一致，建议测试不同浏览器。

---

✅ 最终效果：

• 原来的 #qrcode 会被替换成 #qrcodeimg；
• #qrcodeimg 会显示一个带有 logo 的二维码图片；
• 二维码不再依赖 JavaScript 动态生成，而是静态图片形式展示。

---

如果你还有其他需求，例如保存二维码、导出为文件等，也可以继续扩展以上逻辑。