用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();
}
});
});
});
}