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>