<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="/WEB-INF/tld/fns.tld" prefix="fns" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0,user-scalable=0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		html,
		body {
			max-width: 750px;
			width: 100%;
			margin: 0 auto;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			font-style: normal;
			font-size: 22px;
			color: #222;
			background-color: #fff2e5;
		}

		p {
			line-height: 32px;
		}

		table {
			width: 100%;
			border-collapse: collapse;
		}

		.active-content table td {
			padding: 14px;
			min-height: 50px;
			border-top: 1px solid #E7E7E7;
		}

		.active-content table .key {
			min-width: 112px;
			color: #999;
		}

		.product-solution {
			background-color: #fff;
			margin-bottom: 15px;
			margin: 30px;
		}

		.product-solution .product-header {
			height: 242px;
			text-align: center;
			font-size: 28px;
			letter-spacing: 0;
			text-align: center;
			padding-top: 20px;
			color: #333;
			background: url('<c:url value='/resources/images/biaoti.jpg' />') no-repeat;
			background-size: 100%;
		}

		.product-solution .product-header .bg {
			padding-top: 8px;
			text-align: center;
			font-size: 0px;
		}

		.product-solution .product-header .bg img {
			width: 680px;
		}

		.product-solution .product-content {
			padding: 15px;
			/* border-top: 1px solid #E7E7E7; */
		}

		.product-solution .product-header .title {
			height: 243px;
			font-size: 26px;
			letter-spacing: 0;
			line-height: 280px;
			margin-bottom: 10px;
			margin-top: 8px;
			color: #ff7f00;
			text-align: center;
		}

		.product-solution .product-content .module-title {
			margin: 30px -15px 20px;
			text-align: center;
		}

		.product-solution .product-content .module-title img {
			width: 100%;
		}

		.product-solution .module table {
			text-align: center;
			margin-top: 15px;
			color: #333;
		}

		.product-solution .module table th {
			height: 80px;
			color: #fff;
			background-color: #FF7F00;
			font-weight: normal;
		}

		.product-solution .module table .key {
			width: 130px;
		}

		.product-solution .module table td {
			border: 2px solid #fff;
			background-color: #F4F4F4;
			height: 100px;
		}

		.product-solution .module table .light-yellow {
			background-color: #FFF2E5;
		}

		.product-solution .module .tip {
			padding: 10px 0 20px 5px;
		}

		.product-solution .module .extra {
			padding: 15px 20px;
			background-color: #FFF2E5;
			line-height: 24px;
		}

		.product-solution .module .extra .title {
			font-size: 22px;
			color: #333;
			letter-spacing: 0;
			line-height: 22px;
		}
	</style>
</head>

<body>
<div class="test">
<div class="product-solution">
	<div class="product-header">
		<div class="title">产品优势</div>
		<!-- <div class="title">保障方案</div> -->
		<!-- <div class="bg">
          <img src="images/1.jpg" alt="">
          <img src="images/3.png" alt="">
        </div> -->
	</div>
	<div class="product-content">
		<div class="module">
			<!-- <div class="module-title">
              <img src="images/devide1.png" alt="">
            </div> -->
			<p class="descript">产品简述产品简述产品简述产品简述产品简述产品简述产品简述产品简述产品简述产品简述产品简述。</p>
			<table>
				<thead>
				<tr>
					<th colspan="2">保障范围</th>
					<th colspan="3">赔偿限额</th>
				</tr>
				</thead>
				<tbody>
				<tr>
					<td colspan="2" rowspan="4" class="key light-yellow">保安人员<br>综合责任保险</td>
					<td colspan="2">每次事故<br>责任限额</td>
					<td>60万</td>
				</tr>
				<tr>
					<td colspan="2"> 每人死亡、伤残<br>责任限额</td>
					<td>6万</td>
				</tr>
				<tr>
					<td colspan="2">每人医疗费用<br>责任限额</td>
					<td>200万</td>
				</tr>
				<tr>
					<td colspan="2">累计法律费用<br>责任限额</td>
					<td>300万</td>
				</tr>
				<tr>
					<td colspan="2" class="key light-yellow">烈士褒扬金</td>
					<td colspan="2">每人死亡、伤残<br>责任限额</td>
					<td>300万</td>
				</tr>
				<tr>
					<td colspan="2" rowspan="2" class="key light-yellow">附加三者责任险</td>
					<td colspan="2">每次事故<br>责任限额</td>
					<td></td>
				</tr>
				<tr>
					<td colspan="2">累计责任限额</td>
					<td></td>
				</tr>
				<tr>
					<td colspan="4" class="key light-yellow">保费</td>
					<td></td>
				</tr>
				</tbody>
			</table>
		</div>
	</div>
</div>
</div>
<div><a href="javascript:test3();">test3</a></div>
<div><a class="down" href="" download="downImg">下载</a></div>
<div><a class="down2" href="" download="downImg">下载2</a></div>
</body>
<script type="text/javascript" src="<c:url value='/resources/script/jquery-1.10.2.min.js' />"></script>
<script type="text/javascript" src="<c:url value='/resources/script/html2canvas.min.js' />"></script>
<script>
    //直接选择要截图的dom，就能截图，但是因为canvas的原因，生成的图片模糊
    //html2canvas(document.querySelector('div')).then(function(canvas) {
    //    document.body.appendChild(canvas);
    //});
    //创建一个新的canvas
    var canvas2 = document.createElement("canvas");
    var _canvas = document.querySelector('div');
    var w = parseInt(window.getComputedStyle(_canvas).width);
    var h = parseInt(window.getComputedStyle(_canvas).height);
    //将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了
    canvas2.width = w * 2;
    canvas2.height = h * 2;
    canvas2.style.width = w + "px";
    canvas2.style.height = h + "px";
    //可以按照自己的需求，对context的参数修改,translate指的是偏移量
    //  var context = canvas.getContext("2d");
    //  context.translate(0,0);
    var context = canvas2.getContext("2d");
    context.scale(2, 2);
    html2canvas(document.querySelector('div'), { canvas: canvas2,backgroundColor: '#fff2e5' }).then(function(canvas) {
        //document.body.appendChild(canvas);
        //canvas转换成url，然后利用a标签的download属性，直接下载，绕过上传服务器再下载
        document.querySelector(".down").setAttribute('href', canvas.toDataURL());
    });
</script>


<script language="javascript">
    //这是另一种写法
    $(function () {
        $(".down2").click(function () {
            html2canvas($(".test")).then(function (canvas) {
                var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // 获取生成的图片的url
                window.location.href = imgUri; // 下载图片
            });
            //html2canvas($('.tongxingzheng_bg'), {
            //    onrendered: function (canvas) {
            //        var data = canvas.toDataURL("image/png");//生成的格式
            //        //data就是生成的base64码啦
            //        alert(data);
            //    }
            //});
        });
    });
    function test3(){
        $.ajax({
            type: 'POST',
            url: '/YA-API/ZZX/callbackPay?sign=223eea81eb7b0b3b1dcbbb427aea7f90',
            data:{"body":[{"begdate":"2018-11-17 00:00:00","bkserial":"","enddate":"2018-12-16 23:59:59","paytype":"07","policyno":"23306000010021180000001","riskcode":"","riskname":"","serialno":"1062606496677883904"}],"header":{"ccardbsnstyp":"TIT_BCX","checkcode":"3904","code":"101","timestamp":"1542180531","user":"BCX"}},
            dataType:"json",
            success: function(json) {
                console.log(json);
            }
        });
	}
</script>

</html>