用html2canvas截图，把多张截图拼到一张上面，截得图宽度固定，高度不固定，但是图是黑得

Question

用html2canvas截图，把多张截图拼到一张上面，截得图宽度固定，高度不固定，但是图是黑得，是什么原因

<div class="commom_title_bg common_tops" id="crsjt1"><span>投保人信息</span></div>
                <ul class="promt_messagee" v-show="is_band">
                    <li class="fl promt_messagee_text">投保人基本信息已自动带出，如需修改，请前往官方微信或拨打客服电话修改</li>
                    <li class="fr promt_messagee_icon" @click="img_mask()"></li>
                </ul>
                <ul class="common_table_view" v-bind:class="[appimg?'':'common_bottoms']">
                    <!-- crs截图 -->
                    <div id="crsjt2">
 
                        <li class="common_table_view_cell">
                                <div class="fl common_table_fl">出生日期</div>
                                <div class="fr common_table_fr">
                                    <span class="arrow_left left_span">{{applicant.birthday}}</span>
                                </div>
                            </li>
                            <li class="common_table_view_cell">
                                <div class="fl common_table_fl">性别</div>
                                <div class="fr common_table_fr">
                                    <span class="arrow_left left_span">{{applicant.sex | sex}}</span>
                                </div>
                            </li>
                            <li class="common_table_view_cell">
                                <div class="fl common_table_fl">国籍/地区</div>
                                <div class="fr common_table_fr">
                                    <span class="arrow_left_icon" id="country">{{applicant.national}}</span>
                                </div>
                            </li>
                            <li class="common_table_view_cell">
                                <div class="fl common_table_fl">证件类型<span @click=quest_box("idtype") class="quest_style" id="idtype"></span></div>
                                <div class="fr common_table_fr">
                                    <span id="idcard" v-model="applicanttype">{{applicant.idtype}}</span>
                                </div>
                            </li>
                    </div>
 

function jtfuctioncrs(){
    $("#loadingToast").show();
    // 用于存储所有canvas的高度汇总
    var totalHeight = 0;
    // 创建全局canvas
    var finalCanvas = document.createElement('canvas');
    var context = finalCanvas.getContext('2d');
    // 定义要截取的所有元素的id
    var elementIds = ['crsjt1', 'crsjt2'];
    elementIds.forEach(function(id, index) {
        var element = document.getElementById(id);
        html2canvas(element).then(function(canvas) {
            // 更新全局canvas的宽和高
            finalCanvas.width = Math.max(finalCanvas.width, canvas.width);
            finalCanvas.height = totalHeight + canvas.height;
            // 将当前canvas绘制到全局canvas上，然后向下移动绘图位置
            context.drawImage(canvas, 0, totalHeight);
            totalHeight += canvas.height;
            if (index === elementIds.length - 1) {
                // 所有元素都被绘制到全局canvas后，将其转为IMG标签并插入到页面最后
                var imgElement = document.createElement('img');
                imgElement.src = finalCanvas.toDataURL("image/png");
                // document.body.appendChild(imgElement);
            }
            var jtcrsdata = {
                "sales_agent": hxcjs.getUrlString("sales_agent"),
                "mode": hxcjs.getUrlString("mode"),
                "token_wt": hxcjs.getUrlString("token_wt"),
                "order_no":order_no,
                "plan_no": plan_no,
                "type": "9050_1",
                "img_src":finalCanvas.toDataURL("image/jpeg",0.5).replace("data:image/jpeg;base64,", '')
            };
        $.ajax({
            type: 'POST',
            url: commonurl + 'upload/photo',
            data: JSON.stringify(jtcrsdata),
            timeout: 30000,
            contentType: "application/json",
            async: true,
            dataType: 'json',
            success: function(req) {
              if (req.result_code == "0") {
                console.log('图片上传成功')
              } else {
                $('#loadingToast').hide();
                hxui.toast("图片上传失败请重新上传");
              }
              $('#loadingToast').hide();
            },
            complete: function(XMLHttpRequest, status) {　
              if (status == 'timeout') {
                $('#loadingToast').hide();
                $("#errInfo").show();　　　　
              }　　　　
            },
            error: function() {
              $('#loadingToast').hide();
            }
          });
    });
});
}
 

Answer 1

【相关推荐】

• 你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/781455
• 这篇博客也不错, 你可以看下解决html2canvas截图模糊
• 除此之外, 这篇博客: 使用html2canvas遇到的问题中的 一、简单使用 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

  1、项目中引入html2canvas

  //方式1： 直接script引入包
  <script src="js/html2canvas.js"></script>
  
  // 方式2： 通过npm安装并使用import引入
  npm install html2canvas --save
  import html2canvas from 'html2canvas'
  

  2、基础使用

  <div id="container">
      需要截图的部分
  </div>
  <img id="imgId">
  
  <script>
      html2canvas(document.getElementById("container"), {
          width: 200, // 根据需求进行配置截图的尺寸
          height: 200, // 根据需求进行配置截图的尺寸
          allowTaint: false,
          useCORS: true, //图片跨域
          dpi: 300,  //解决生产图片模糊
          backgroundColor: "#fff", // 一定要添加背景颜色，否则出来的图片，背景全部都是透明的
      }).then(canvas => {
          const src = canvas.toDataURL('image/png')
          document.getElementById('imgId').setAttribute('src', src)
      })
  </script>
  

  

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^