用html2canvas截图，怎么能把多张截图拼到一张上面，截得图宽度固定，高度不固定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.common {
display: flex;
justify-content: space-around;
}
</style>
</head>
<body>
<div id="chen1">
<li class="common">
<div class="fl">出生日期</div>
<div class="fr">
<span>1999-9-9</span>
</div>
</li>
<li class="common">
<div class="fl">性别</div>
<div class="fr">
<span>女</span>
</div>
</li>
<li class="common">
<div class="fl">国籍/地区</div>
<div class="fr">
<spanid="country">中国</spanid=>
</div>
</li>
<li class="common">
<div class="fl">证件类型</div>
<div class="fr">
<span id="idcard">身份证</span>
</div>
</li>
</div>
<div id="chen2">123456</div>
<div id="chen3">河南、山东、湖北等地的累计降雪量具有极端性，河南、湖北、安徽、湖南、贵州5省将出现冻雨。
长江以南地区雨势也不弱，并伴有雷电，预计此次雨雪持续时间为今冬以来最长，影响范围也最广。</div>
<div id="chen4">78654654</div>
<div id="chen5">
<p>快科技1月29日消息，据中国气象局网站，中央气象台发布重要天气提示：春节前大范围持续性强雨雪天气来袭，豫鲁鄂降雪具有极端性。</p>
<p>中央气象台预报显示，1月31日-2月5日，我国中东部地区将出现大范围持续性雨雪冰冻天气，10省将出现暴雪或大暴雪。</p>
</div>
<div id="chen6">ghfghdfg</div>
<div id="chen7">gfdhgfhd</div>
<div id="chen8">gfdgfhdfg</div>
<div id="chen10">fghkhkfhg</div>
<div id="chen11">
<div class="smz">
<div id="iszz" @click="is('Y',3)"></div>纸质
</div>
<div class="smz">
<div id="iszz" @click="is('N',3)"></div>电子
</div>
</div>
<div id="chen12">hjkhjlkh</div>
<div><button>下一步</button></div>
<!-- 智能——截图插件 -->
<script src="lib/html2canvas.js?v=76fgf.54"></script>
<script>
function jtfuction(key,num,data,addnum){
var id,jttype;
switch (key) {
case "0":
id="chen1";
jttype="9018";
break;
case "1":
id="chen3";
jttype="9043";
break;
case "2":
id="chen5";
jttype="9044";
break;
case "3":
id="chen7";
jttype="9045";
break;
case "4":
id="chen9";
jttype="9050_2";
break;
case "5":
id="chen11";
jttype="9050_1";
break;
}
//智能微投截图
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") {
//成功
} else {
$('#loadingToast').hide();
hxui.toast("图片上传失败请重新上传");
}
$('#loadingToast').hide();
},
complete: function(XMLHttpRequest, status) {
if (status == 'timeout') {
$('#loadingToast').hide();
$("#errInfo").show();
}
},
error: function() {
$('#loadingToast').hide();
}
});
})
}
</script>
</body>
</html>
