html2canvas 使用文字偏移，input错位，背景透明，图片模糊，苹果机无法保存到本地相册

需要一个提交信息的表单，提交之后提示用户保存图片凭证。

html2canvas 不同版本链接：Releases · niklasvh/html2canvas · GitHub

用新的版本就好了，避免图片下载之后变得模糊。

补坑：苹果手机用a标签下载图片无法保存到相册，仔细看了safari浏览器从网页下载图片默认是存在icloud云端的，一般人是找不到的。于是为了用户的体验，改成了生成图片流，然后用户手动去点击保存图片，这样的话微信浏览器也不受限制了。

<style>
body{ font-family:"\9ED1\4F53"; } /* 用这种格式，防止文字错位 */
.is_show{ display: none; }
.pic{ width: 90%; margin:0 auto; box-shadow: 5px 10px 10px #ccc; display: none; }
</style><img src="" alt="图片凭证" class="pic">  <!-- 苹果机无法自动保存在本地相册，改用图片 -->
<div class="body" id="capture">
<div class="tit">预约登记</div>   
<div class="ztfq12">       <form method="post" target="aa" id="myform">                   <li><label><i>*</i>姓<span>白白</span>名：</label><div class="name is_show tt"></div><input type="text" class="input" name="name" id="name"  /></li><li>            <label><i>*</i>联系方式：</label><div class="tel is_show tt"></div><input id="tel" type="text" class="input" name="hometel" /></li><li>            <label><i>*</i>挂号科室：</label><div class="illnessState is_show tt"></div><select name="illnessState" class="input" id="illnessState"><option value="胸外科">胸外科</option><option value="肺结节科">肺结节科</option><option value="胸肺呼吸科">胸肺呼吸科</option><option value="呼吸内科">呼吸内科</option><option value="手汗症科">手汗症科</option></select></li><li>            <label><i>*</i>门诊专家：</label><div class="doctor is_show tt"></div><select name="doctor" class="input" id="doctor"><option value="陈**">陈**</option><option value="李*">李*</option><option value="何**">何**</option><option value="冉*">冉*</option><option value="李**">李**</option><option value="邢**">邢**</option></select></li><img src="https://4g.67137777.com/zxform/picture/xwghlj_1.png" class="chapter is_show"><li>            <label><i>*</i>就诊日期：</label><div class="dateOfAppointment is_show tt"></div><input type="text" class="input" name="dateOfAppointment" id="dateOfAppointment"></li><li class="lastli"><label><i>*</i>就诊时间：</label><div class="timeOfAppointment is_show tt"></div><select name="timeOfAppointment" class="input" id="timeOfAppointment"><option value="上午8:30-10:30">上午8:30-10:30</option><option value="上午10:30-12:00">上午10:30-12:00</option><option value="下午13:30-15:30">下午13:30-15:30</option><option value="下午15:30-17:00">下午15:30-17:00</option></select></li> <div class="submit" onclick="isSubmit()">提&nbsp;交</div></form>     
</div>
<div class="infos">注：本挂号凭证当日有效，请按时就诊<br/><span>在医院1楼导医台出示预约信息，即可就诊</span></div>
</div>
<button class="btns is_show" onclick="saveCanvas()">↓点击保存当前凭证</button>

//记得引入 html2canvas.min.js
//数据提交
function isSubmit(){var name = $('#name').val();if(name == ""){alert("请填写您的姓名!");return;}var tel = $("#tel").val();if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(tel))) {alert("手机号码有误，请重填!");return;}var tel1 = "" + tel;var tel2 = tel1.replace(tel1.substring(3,7), "****");  //号码星号var dateOfAppointment = $("#dateOfAppointment").val();if(dateOfAppointment == ""){alert("请填写就诊日期!");return;}var timeOfAppointment = $("#timeOfAppointment").val();var illnessState = $("#illnessState").val();var doctor = $('#doctor').val(); //赋值$('.name').text(name);$(".tel").text(tel2);$(".illnessState").text(illnessState);$(".doctor").text("门诊专家("+doctor+")");$(".dateOfAppointment").text(dateOfAppointment);$(".timeOfAppointment").text(timeOfAppointment);$.post("https://xxxxxx",{name:name,hometel:tel,dateOfAppointment:dateOfAppointment,timeOfAppointment:timeOfAppointment,illnessState:illnessState},function(res){var data = JSON.parse(res); //解析json数据if(data.status == 1){alert('预约成功，立即生成挂号凭证单');$(".is_show").css("display","block");  //显示$(".input,.submit").css("display","none");  //隐藏提交按钮和筛选框$(".lastli").css("border-bottom","none"); //去掉边框}else{alert('数据提交失败，请稍后再提交');return false;}               },'json');
}//保存界面为图片
function saveCanvas() { var copyDom = $(".body");  //要保存的html2canvas(copyDom[0], {useCORS: true,  // 【重要】开启跨域配置background: "#ffffff", // 一定要添加背景颜色，否则出来的图片，背景全部都是透明的}).then(function(canvas){// var url = canvas.toDataURL();// var t2 = Date.now(); //时间戳// var filename = "挂号凭证" + t2 + ".png";//var triggerDownload = $("<a>").attr("href", url).attr("download",filename).appendTo("body");//triggerDownload[0].click();//triggerDownload.remove();//document.body.appendChild(canvas);//苹果机补坑，改用图片，手动保存var url = canvas.toDataURL("image/png"); //将canvas转换成base64$(".pic").attr("src",url);  //生成图片链接$(".body").hide();  //隐藏原来的表单$(".pic").css("display","block");  //展现图片流$(".btns").text("↓长按图片保存到本地");$(".btns").removeAttr("onclick"); //移除点击事件});
}

因为input保存图片的时候错位了，也没弄明白啥原因，后面我单独用的 div 来存储提交后的数据，在post提交之后，直接隐藏输入框，展示赋值后的div，打印的时候需要哪些区域就用 div 框起来。下载之后的效果图如下：

注意：微信浏览器是无法下载图片的，因为我这个是动态赋值的，是一个无法刷新的页面，所以在用户访问的时候就限制只可使用其他浏览器访问。（补坑后这个就用不上了）

<script>
$(function(){var ua = navigator.userAgent.toLowerCase();  if(ua.match(/MicroMessenger/i)=="micromessenger") {  document.head.innerHTML = '<title>抱歉，出错了</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0"><link rel="stylesheet" type="text/css" href="https://res.wx.qq.com/open/libs/weui/0.4.1/weui.css">';document.body.innerHTML = '<div class="weui_msg"><div class="weui_icon_area"><i class="weui_icon_info weui_icon_msg"></i></div><div class="weui_text_area"><h4 class="weui_msg_title">请点击右上角“...”，在其他浏览器打开链接</h4></div></div>';}
})
</script>