整个erwm区域（包括上方文字图片，二维码图片和下方的文字）会被绘制成一个图片，覆盖在原始erwm位置。

<div class="fr common_right_btn" onclick="savePlan()" v-show="!role">分享</div>

.con_qr {
    width: 82.7%;
    padding-bottom: .42rem;
  background-color: #f7f7f7;
    border-radius: 0.2rem;
    box-sizing: border-box;
    position: relative;
    margin: 0 auto;
}
.con_qr .page_anme{
    color: #999999;
    font-size: 0.48rem;
    font-family: "微软雅黑";
    text-align: center;
    line-height: 0.5rem;
    margin-bottom:0.3rem;
}
#output {
    width: 7.4rem;
    height: 7.4rem;
    margin: 0 auto;
    padding: 0.4rem;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #dfdfdf;
}
#output img{
    width: 100%;
  height: 100%;
}
#qrcodeimg{
        position: absolute;
        z-index:100;
}
.temp{
    display: none;
}
#desc{
    text-align: center;
    line-height: 0.82rem;
    font-size: 0.52rem;
    font-family: "微软雅黑";
    color: #959494;
}
/* 二维码 */
.con_qr #my_close{
    width: 0.88rem;
    height: 0.88rem;
    border-radius: 50%;
    background: #cccccc;
    position: absolute;
  top: -0.32rem;
    right: -0.5rem;
    z-index: 999999;
}
#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;
}

// 引入二维码/复制插件
document.write("<script src='../../lib/html2canvas.js?v=1.34'></script>");
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>");
$("#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>')//20260212-6236二维码生成

 function savePlan() {
    var link = "";
    link = commonurl_front + "blank.html?product_no=" + _URL_PRODUCT_NO + "&special_apply_no=" + special_apply_no;
    //20260212-6236二维码生成
    $("#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/ruilogo.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", 1.0);
            // 先设置容器样式
            $(".outputline").css({
                'min-height': widthq + 'px',
                'display': 'flex',
                'justify-content': 'center',
                'align-items': 'center',
            });
            // 显示二维码图片
            $("#qrcodeimg").css({
                'max-width': '100%',
                'max-height': widthq + 'px',
                'height': 'auto',
                'width': 'auto',
                'margin': '0 auto',
                'display': 'block'
            });
            // 设置图片源
            $("#qrcodeimg").attr("src", newCanvasDataURL);
            // replaceEwm();
            if(!isWeixin) {
                $(".qr_suspend").show();
                $("#qrcode").show();
            }
        };
    }, 100);
    //二维码兼容性问题修改
    var btn = document.getElementsByClassName("btn")[0];
    var clipboard = new ClipboardJS(btn);
    $(".btn").attr("data-clipboard-text", link);
    $(".copy-links").hide();
    clipboard.on('success', function (e) {
        hxui.toast("链接复制成功");
    });
    clipboard.on('error', function (e) {
        hxui.toast("链接复制失败");
    });
    $.ajax({
        type: 'POST',
        url: commonurl + 'plan/saveseed',
        data: JSON.stringify(aaa),
        timeout: 30000,
        dataType: 'json',
        contentType: "application/json",
        success: function (req) {
            //mini半自助小程序分享
            var recalljump = function () {
                // 会客厅
                loShare();
                // 二维码
                ewmAjax()
                $('#loadingToast').hide();
                if (iswxxcx) {
                    var share_url;
                    var str = "";
                    if (link.indexOf("?") != -1) {
                        share_url = link.split("?")[1];
                    }
                    var path = encodeURIComponent(commonurl_front + "xcxshare.html?" + share_url + "&xcx_page=2")
                    wx.miniProgram.navigateTo({
                        url: '/pages/comshare/comshare?url=' + path
                    })
                    return;
                }
            }
            Recall.recallEnd(return_appid.seed_no, recalljump)
        },
        complete: function (XMLHttpRequest, status) {
            if (status == 'timeout') {
                $('#loadingToast').hide();
                $("#errInfo").show();
            }
        },
        error: function (xhr, type) {
            hxui.toast("网络请求出错");
            $('#loadingToast').hide();
        }
    });
}
function ewmAjax() {
    var ewmdata={
        "seed_no": hxcjs.getUrlString("seed_no")||return_appid.seed_no,
        "plan_no": "",
        "sales_agent":  _URL_SALES_AGENT,
    }
    $.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();
                }
            }
            // replaceEwm()
        },
        complete: function (XMLHttpRequest, status) {
            if (status == 'timeout') {
                $('#loadingToast').hide();
                $("#errInfo").show();
            }
        },
        error: function (xhr, type) {
            hxui.toast("网络请求出错");
            $('#loadingToast').hide();
        }
    });
}

写回答
好问题 0 提建议
关注问题
分享
邀请回答
编辑收藏删除结题
收藏举报

2条回答默认最新

关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
檀越@新空间 2026-03-23 15:20
关注
下午好🌅🌅🌅
本答案参考通义千问

你描述的是一个网页中需要将整个 ERWM 区域（包含上方文字、二维码图片和下方文字） 绘制为一个图片，并将其覆盖在原始位置。这通常用于生成一张完整的二维码页面，供用户下载或分享。

问题核心分析：

你希望将 .con_qr 容器中的所有内容（包括文字、二维码、描述等）绘制为一张图片。
这张图片会覆盖在原 ERWM 的位置上（可能是某个遮罩层或者弹窗）。
需要使用 JavaScript 工具如 html2canvas 来完成这个任务。

✅ 解决方案：

引入必要的库

html2canvas.js：用于将 DOM 元素渲染为图片。
jquery.qrcode.min.js：用于生成二维码。
clipboard.min.js：用于复制文本到剪贴板（可选）。

确保 HTML 结构正确

确保 .con_qr 是一个容器，包含所有需要绘制的元素（如文字、二维码、描述等）。

编写 JavaScript 代码实现截图功能

使用 html2canvas 将 .con_qr 渲染为图片。
将图片插入到指定的位置（例如遮罩层）。

添加点击事件触发截图功能

比如点击“分享”按钮时调用截图函数。

优化样式和布局

确保截图区域在渲染时不会被其他元素遮挡。

📌 示例代码

HTML 结构

<div class="fr common_right_btn" onclick="savePlan()" v-show="!role">分享</div> <div class="qr_suspend"> <div class="con_qr">  <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">20年</span></p> </div> <div class="ewm_info_addxing"> <div class="ewm_addcalc"></div> <p>保额：<span class="ewm_amount">100万</span>元</p> </div> <div class="ewm_info_addxing"> <div class="ewm_addcalc"></div> <p>首年合计保费：<span class="ewm_premium">5000</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="https://example.com">复制链接</span></p> </div> </div>

JavaScript 代码（修改后的）

// 引入 html2canvas document.write("<script src='../../lib/html2canvas.js?v=1.34'></script>"); document.write("<script src='../../lib/jquery.qrcode.min.js?v=1.34'></script>"); document.write("<script src='../../lib/clipboard.min.js?v=1.34'></script>"); function savePlan() { // 生成二维码 $("#qrcode").qrcode({ text: "https://example.com", width: 200, height: 200 }); // 使用 html2canvas 截图 html2canvas(document.querySelector(".con_qr"), { scale: 2, // 提高清晰度 useCORS: true, // 如果有跨域图片，需设置 allowTaint: false }).then(canvas => { // 创建图片元素 const img = document.createElement("img"); img.src = canvas.toDataURL("image/png"); // 将图片插入到遮罩层中 const qrContainer = document.querySelector(".qr_suspend"); qrContainer.innerHTML = ""; // 清空原有内容 qrContainer.appendChild(img); }); }

✅ 注意事项：

确保 QR 二维码已生成：在调用 html2canvas 前，必须先通过 qrcode 插件生成二维码。
样式兼容性：某些 CSS 属性（如 background-image 或 filter）可能会影响截图效果，建议测试后调整。
性能问题：如果内容复杂，截图可能会较慢，可以考虑优化 DOM 结构或使用懒加载。

✅ 总结

核心目标：将 .con_qr 中的所有内容（文字、图片、二维码等）绘制为一张图片。
实现方式：使用 html2canvas 库进行截图。
关键点：确保二维码生成后再截图，合理处理样式与布局。

如果你还有其他问题，比如如何保存为文件、如何展示在弹窗中等，也可以继续提问！
解决无用
评论打赏
分享
举报

评论

按下Enter换行，Ctrl+Enter发表内容

报告相同问题？

关注问题

C# 生成二维码源码可生成图片底部可显示文字
2022-04-10 20:05

创建一个新的图片，将二维码和文字绘制到该图片上。 ```csharp using System.Drawing; // 创建新图像，大小为二维码加上文字区域 var combinedImage = new Bitmap(qrCodeImage.Width, qrCodeImage.Height + 50); ...
java中生成二维码带logo带底部文字带压缩图片
2017-09-30 15:11

java 生成二维码(QRCode)图片，包括logo，底部文字，压缩图片
C#实现在图片上添加文字和二维码
2019-06-04 16:14

Yfw&武的博客我的公众号二维码图片：运行程序后的效果图：源代码如下：添加图片方法： DrawImage(Image, 画图位置x, 画图位置y, 图片宽, 图片高)；添加文字方法： DrawString(文字, 字体, 画笔, 位置); //窗口加载事件 .....
JAVA生成二维码,图片合成,图片添加文字对应资源和代码
2018-10-23 15:42

在IT行业中，生成二维码、图片合成以及在图片上添加文字是常见的图像处理任务，尤其是在移动应用、营销推广和数据交换等领域。本资源包提供了一个基于Java的解决方案，使用了ZXing库（Zebra Crossing）和Java 2D图形...
JS实现定位图片二维码的坐标位置
2024-02-23 16:31

爱吃排骨的博客一张图片中有一个二维码，我们想要知道二维码的位置可以通过下面的方法来实现。使用 ctx.drawImage来叠加定位覆盖原始二维码从而实现功能。如果想要将默认的二维码换成我们动态生成的二维码则可以这样继续修改一下...
php将二维码和文字结合到一个背景图片上,合成一张图
2019-05-10 17:20

yangde1990的博客将二维码生成到背景图片上，并且文字生成到背景图上，可以无限制扩增 class codeImg { private $date,$img,$main,$width,$height,$target,$white; public function constr($source) { $this->date ...
QRCode二维码生成器， C#, 支持中间图片，中间文字，头部文字。直接可用
2017-10-11 11:46

2. 文字插入：对于中间文字，可以先计算文字的尺寸和位置，确保不遮挡重要编码区域，然后使用GDI+或其它绘图技术将文字绘制到二维码上。 3. 头部文字：头部文字的处理类似，一般会在二维码上方添加一行文本，可以...
Android 图片合成海报生成二维码，指定文字。
2020-09-25 15:47

随缘的人_的博客一，图片合成，海报增加二维码，文字，或者用户ID。先看图这个是没有合成之前的图。合成之后的图。。使用到的技术点 1，图片Glide 2, banner2.0 3， zxing class MainActivity : AppCompatActivity() { var ...
Python 实战：生成二维码并集成到图片添加自动换行中文文字
2025-02-19 10:50

爱搬砖的程序猿.的博客在数字化时代，二维码的应用极为广泛，无论是商业推广、信息分享还是活动参与，都能看到二维码的身影。
uniapp 画布绘制二维码,图片,文字的方法
2021-09-05 15:30

撑戌圆爱痒生的博客 uniapp 画布绘制二维码创建canvas标签canvas属性获取canvas上下文开始绘制画图片本地图片网络图片渐变色画背景图创建一个渐变色线性对象画文字画二维码坑点最近再用uniapp开发开发中需要做一个邀请码用到画布这个...
没有解决我的问题, 去提问

问题事件

关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
创建了问题 3月23日

整个erwm区域（包括上方文字图片，二维码图片和下方的文字）会被绘制成一个图片，覆盖在原始erwm位置。

2条回答 默认 最新

问题核心分析：

✅ 解决方案：

📌 示例代码

HTML 结构

JavaScript 代码（修改后的）

✅ 注意事项：

✅ 总结

问题事件

2条回答默认最新