<div style="width: 96%; margin-right: auto; margin-left: auto" id="cert_1">
    <h3>完赛证书</h3>
    <div id="cert">
       <br/><br/>
       <br/><br/><br/><br/>  <br/><br/>
       <br/><br/><br/><br/><table style="text-align: center;width: 900px;" align="center">
        <tr>
            <td colspan="3">
             <p style="color: #c39a6f; font-size: 25pt;"> <?php echo $msg['title'].$msg['group_title']?></p>
         </td>
     </tr>
 </table>
 <br/>
 <table style="text-align: center;width: 900px;" align="center">
     <tr>
        <td colspan="3">
            <div style="max-width: 600px; margin-right: auto;margin-left: auto;color:#564a9e;font-size: 9pt;">
                <?php echo $msg['race_line']?>
            </div>

        </td>
    </tr>
    <tr>
        <td>
          <p style="font-size: 9pt;color:#564a9e;">
            总路程:<?php echo $msg['group_distance']?> 公里
        </p>
        <hr size=0 noshade="noshade" style="border:  none;width: 100px;border-bottom: 1px dotted #564a9e;" />
        <p style="font-size: 9pt;color:#564a9e;">
            参赛时间：<?php echo $msg['start-time']?>
        </p>
    </td>
    <td>
    </td>
    <td>
       <p style="font-size: 9pt;color:#564a9e;">
        选手姓名：<?php echo $msg['name']?>
    </p>
    <hr size=0 noshade="noshade" style="border:  none;width: 100px;border-bottom: 1px dotted #564a9e;" />
    <p style="font-size: 9pt;color:#564a9e;">
        完成时间：<?php echo $msg['finish_time']?> 
    </p>
</td>
</tr>
</table>
</div>
</div><br/><br/>

<div style="width: 96%; margin-right: auto; margin-left: auto;display: none;" id="cert_2">
    <div id="cert_3">
       <br/><br/>
       <br/><br/><br/><br/>  <br/><br/><br/><br/>
       <br/><br/><br/><br/><table style="text-align: center;width: 900px;" align="center">
        <tr>
            <td colspan="3">
             <p style="color: #c39a6f; font-size: 25pt;"> <?php echo $msg['title'].$msg['group_title']?></p>
         </td>
     </tr>
 </table>
 <br/><br/><br/>
 <table style="text-align: center;width: 900px;" align="center">
     <tr>
        <td colspan="3">
            <div style="max-width: 600px; margin-right: auto;margin-left: auto;color:#564a9e;font-size: 9pt;">
                <?php echo $msg['race_line']?>
            </div>

        </td>
    </tr>
    <tr>
        <td>
          <p style="font-size: 9pt;color:#564a9e;">
            总路程:<?php echo $msg['group_distance']?> 公里
        </p>
        <hr size=0 noshade="noshade" style="border:  none;width: 100px;border-bottom: 1px dotted #564a9e;" />
        <p style="font-size: 9pt;color:#564a9e;">
            参赛时间：<?php echo $msg['start-time']?>
        </p>
    </td>
    <td>
    </td>
    <td>
       <p style="font-size: 9pt;color:#564a9e;">
        选手姓名：<?php echo $msg['name']?>
    </p>
    <hr size=0 noshade="noshade" style="border:  none;width: 100px;border-bottom: 1px dotted #564a9e;" />
    <p style="font-size: 9pt;color:#564a9e;">
        完成时间：<?php echo $msg['finish_time']?> 
    </p>
</td>
</tr>
</table>
</div>
</div>

<div class="btn" id ="saveImg">下载证书</div>
</div>
<script type="text/javascript" src="js/html2canvas.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function(){  
        $("#saveImg").click(function(){ 
            $("#cert_2").css("display","block");
         html2canvas(document.querySelector("#cert_3")).then(canvas => {
            //document.body.appendChild(canvas);
             var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // 获取生成的图片的url  
             window.location.href= imgUri; // 下载图片 
            $("#cert_2").css("display","none");
         });  
     });  
    }); 
</script>
<style type="text/css">
#cert{background:url(images/cert_bg.jpg);width: 900px;height: 652px; margin-left: auto;margin-right: auto;}
#cert_3{background:url(images/cert_bg.jpg);width: 900px;height: 652px; margin-left: auto;margin-right: auto;}
#saveImg{margin-left:auto; margin-right: auto;margin-top: 40px; padding:10px; font-size:20px;text-align: center;background-color: skyblue;width: 200px;margin-bottom: 40px}
</style>