html2canvas截图跳过图片，html2canvas截图的时候能跳过图片不截图片，有什么方法呢

Question

html2canvas截图跳过图片，html2canvas截图的时候能跳过图片不截图片，有什么方法呢

这个是截图方法，在点击下一步时使用

function jtfuction(key,num,data,addnum){
  var id,jttype;
  switch (key) {
    //crs截图
    case "6":
    id="crsjt2";
    jttype="9050_3";
    break;
    case "5":
    id="huaxui-dialog-crs";
    jttype="9050_2";
    break;
    case "4":
    id="customerinfo";
    jttype="9050_1";
    break;
    case "0":
    id="relationbox";
    jttype="9018";
    break;
    case "1":
    id="ben1reltionbox";
    jttype="9043";
    break;
    case "2":
    id="ben2reltionbox";
    jttype="9044";
    break;
    case "3":
    id="ben3reltionbox";
    jttype="9045";
    break;
  }
  //智能微投截图
  $("#loadingToast").show();
  var c_height =document.getElementById(id).offsetTop;
  var r_height=$("#"+id).height();
  html2canvas(document.querySelector("#"+id),{
    width: 1400,
    height:r_height,
    y:c_height,
    useCORS:true,
  }).then(function(canvas){
      var jtpostdata = {
        "type": jttype,
        "img_src":canvas.toDataURL("image/jpeg",0.5).replace("data:image/jpeg;base64,", '')
      };
      $.ajax({
        type: 'POST',
        url: commonurl + 'upload/photo',
        data: JSON.stringify(jtpostdata),
        timeout: 30000,
        contentType: "application/json",
        async: true,
        dataType: 'json',
        success: function(req) {
          if (req.result_code == "0") {
            if(key!='4'&&key!='5'){
            }
          } else {
            $('#loadingToast').hide();
            hxui.toast("图片上传失败请重新上传");
          }
          $('#loadingToast').hide();
        },
        complete: function(XMLHttpRequest, status) {　
          if (status == 'timeout') {
            $('#loadingToast').hide();
            $("#errInfo").show();　　　　
          }　　　　
        },
        error: function() {
          $('#loadingToast').hide();
        }
      });
  })
}

<div class="tbr">
    <div class="common_container claer-over">
      <div class="commom_title_bg common_tops" id="crsjt1"><span>投保人信息</span></div>
      <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>
        <!-- 身份证 -->
        <div class="imgbox" v-show="applicant.type=='01'">
          <div class="images">
            <input accept="image/*" type="file" name="img" class="appimage" @change="allimgup('1','01','9001',$event)">
            <img @click="allimgup('1','01','9001')" v-bind:src="applicant.photo.type_01[0].photo_url" class="signimg1">
          </div>
          <div class="images">
            <input accept="image/*" type="file" name="img" class="appimage" @change="allimgup('1','01','9002',$event)">
            <img @click="allimgup('1','01','9002')" v-bind:src="applicant.photo.type_01[1].photo_url" class="signimg1">
          </div>
        </div>
        <!-- 户口本 -->
        <div class="imgbox" v-show="applicant.type=='02'">
          <div class="images">
            <input accept="image/*" type="file" name="img" class="appimage" @change="allimgup('1','02','9001',$event)">
            <img @click="allimgup('1','02','9001')" v-bind:src="applicant.photo.type_02[0].photo_url">
          </div>
        </div>
        <!-- 护照 -->
        <div class="imgbox" v-show="applicant.type=='07'||applicant.type=='51'">
          <div class="images">
            <input accept="image/*" type="file" name="img" class="appimage" @change="allimgup('1','07','9001',$event)">
            <img @click="allimgup('1','07','9001')" v-bind:src="applicant.photo.type_07[0].photo_url">
          </div>
          <div class="images" @click="allimgup('1','07','9002')">
            <input accept="image/*" type="file" name="img" class="appimage" @change="allimgup('1','07','9002',$event)">
            <img @click="allimgup('1','07','9002')" v-bind:src="applicant.photo.type_07[1].photo_url">
          </div>
        </div>
        <!--     台胞证 -->
        <div class="imgbox" v-show="applicant.type=='12'">
          <div class="images">
            <input accept="image/*" type="file" name="img" class="appimage" @change="allimgup('1','12','9001',$event)">
            <img @click="allimgup('1','12','9001')" v-bind:src="applicant.photo.type_12[0].photo_url">
          </div>
          <div class="images">
            <input accept="image/*" type="file" name="img" class="appimage" @change="allimgup('1','12','9002',$event)">
            <img @click="allimgup('1','12','9002')" v-bind:src="applicant.photo.type_12[1].photo_url">
          </div>
        </div>
      </ul>
      <ul class="common_table_view common_bottoms" v-show="appimg">
        <li class="common_table_view_cell">
          <div class="fl common_table_fl">投保人姓名</div>
          <div class="fr common_table_fr">
            <input v-show="!isDisabled" type="text" maxlength="50" placeholder="请输入" v-on:input="Namesyr('app')"
              id="appname" maxlength="20" class="arrow_left" v-bind:class="[isDisabled?'left_span':'']"
              v-model="applicant.name" :disabled="isDisabled" onfocus="hideErr('appname')"
              onblur="checkName('appname','投保人')" v-on:input="syr1asapp()">
            <span v-show="isDisabled" class="longname">{{applicant.name}}</span>
          </div>
          <div class="fl err_message">
            <span></span>
          </div>
        </li>
        <li class="common_table_view_cell">
          <div class="fl common_table_fl">证件号码</div>
          <div class="fr common_table_fr">
            <input type="text" placeholder="请输入" maxlength="18" name="syx" class="arrow_left" v-model="applicant.number"
              id="appidcard" onfocus="hideErr('appidcard')"
              onblur="isCardID('appidcard','投保人','idcard',vm.applicant.name,vm.applicant.nationality)"
              v-on:input="syr1asapp()">
          </div>
          <div class="fl err_message">
            <span></span>
          </div>
        </li>
        <li class="common_table_view_cell datebackground" id="applicantStartdate">
          <div class="fl common_table_fl">证件有效起期</div>
          <div class="fr common_table_fr">
            <span class="application_birthday" id="appidcardate_start">{{applicant.start_date}}</span>
            <span class="birthday_icon idcardateimg" id="appidcardates_start"></span>
          </div>
          <div class="fl err_message">
            <span></span>
          </div>
        </li>
        <li class="common_table_view_cell" v-bind:class="[app_idcardate?'':'dataheight']">
          <div class="fl common_table_fl">证件有效止期<span @click=quest_box("idcardate") class="quest_style"
              id="idcardate"></span></div>
          <div class="fr common_table_fr">
            <!-- crs修改 -->
            <span class="fl genders" @click="gx_aniu1(app_idcardate)"><span
                :class="app_idcardate?'option_icon_true':'option_icon_false'"></span>长期有效</span>
          </div>
          <div class="idcardatebox" v-show="app_idcardate?false:true">
          </div>
          <div class="idcardate datebackground" v-show="app_idcardate?false:true">
            <div class="fl common_table_fl idcardatetxt" v-show="applicant.expiration_date?false:true">请选择证件有效期</div>
            <div class="fr common_table_fr">
              <span class="application_birthday" id="appidcardate">{{applicant.expiration_date}}</span>
              <span class="birthday_icon idcardateimg" id="appidcardates"></span>
            </div>
          </div>
        </li>
        <li class="common_table_view_cell sys-title">
          <div class="fl common_table_fl">手机号码<span @click=quest_box("phone") class="quest_style" id="phone"></span>
          </div>
          <div class="fr common_table_fr telclass">
            <input id="appmobile" v-bind:class="[is_band?'phone':'']" v-on:input="inputFunc('appmobile')" type="tel"
              class="arrow_left" placeholder="请输入" maxlength="14" v-model="mobile" onfocus="hideErr('appmobile')"
              onblur="checkTele('appmobile','投保人')" :disabled="isDisabled" v-on:input="syr1asapp()"></input>
          </div>
          <div class="fl err_message">
            <span></span>
          </div>
        </li>
        <li class="common_table_view_cell email_dask_f">
          <div class="fl common_table_fl">电子邮箱</div>
          <div class="fr common_table_fr">
            <input type="text" class="arrow_left inputMailList" id="me" placeholder="选填，用于接收保单" required autofocus
              autocomplete="off" maxlength="50" v-model="checkme" onfocus="hideErrs()"></input>
          </div>
          <div class="fl err_message">
            <span></span>
          </div>
        </li>
        <li class="common_table_view_cell" :class="[applicant.address.addressval.length>17?'longsyrs':'shortsyrs']">
          <div class="fl common_table_fl">所在地区</div>
          <div class="fr common_table_fr">
            <span class="arrow_left_icon" id="appliarea"
              :class="[applicant.address.addressval.length>17?'longsyr':'shortsyr']">{{applicant.address.addressval}}</span>
          </div>
        </li>
        <li class="common_table_view_cell" v-bind:class="[app_textareaclass?'textareah':'']">
          <div class="fl common_table_fl">详细地址<span @click=quest_box("textareah") class="quest_style"
              id="textareah"></span></div>
          <div class="fr common_table_fr">
            <textarea class="arrow_left textarea" id="appcheckarea" v-bind:class="[app_textareaclass?'textareah':'']"
              maxlength="30" placeholder="请输入" v-model="app_textarea"
              onblur="checkarea('appcheckarea','投保人')"></textarea>
          </div>
        </li>
      </ul>
    </div>
  </div>

Answer 1

引自免费微信小程序：皆我百晓生

**问题描述：**如何在使用html2canvas截图时跳过图片，不截取图片。

**解决方案：**在使用html2canvas截图时，可以通过对图片元素进行处理，来达到跳过图片的效果。

1. 首先，在截图时获取所有的图片元素。

   var images = document.querySelectorAll('img');
   

2. 然后，遍历图片元素数组，将每个图片元素的src设置为空，跳过该图片。

   images.forEach(function(img) {
     img.setAttribute('src', '');
   });
   

3. 接着，使用html2canvas进行截图。

   html2canvas(document.querySelector("#"+id),{
     width: 1400,
     height:r_height,
     y:c_height,
     useCORS:true,
   }).then(function(canvas) {
     // 处理截图结果
     // ...
   });
   

4. 最后，在处理截图结果时，可以将图片重新恢复。

   images.forEach(function(img) {
     img.setAttribute('src', '图片URL');
   });
   

上述是一种通过在截图前修改图片元素的src来跳过图片的方法。如果你希望完全不加载图片，可以参考以下解决方案。

**解决方案2：**可以使用exclude选项来排除不需要截图的区域，具体步骤如下：

1. 在使用html2canvas进行截图时，设置exclude选项。

   html2canvas(document.querySelector("#"+id),{
     width: 1400,
     height:r_height,
     y:c_height,
     useCORS:true,
     exclude: [function(element) {
       // 判断是否需要排除当前元素
       if (element.tagName === 'IMG') {
         // 判断图片是否需要排除
         return true; // 需要排除
       }
       return false; // 不需要排除
     }]
   }).then(function(canvas) {
     // 处理截图结果
     // ...
   });
   

通过在exclude选项中设置一个回调函数，判断是否需要排除当前元素。如果当前元素的标签名为IMG，则可以返回true，表示需要排除该元素（即不截取该图片）；否则返回false，继续截取。

**注意：**以上两种方法都需要使用html2canvas的最新版本，以确保功能可用。