Demo：仅供参考，实际业务场景请根据自己的需求修改（本案例提供的是思路和实现方式）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<link rel="stylesheet" type="text/css" href="/js/test_css/reset.css"/>
<link rel="stylesheet" type="text/css" href="/js/test_css/index.css"/>
//上面两个是页面的样式，可以不用借用，用自己的即可。
<script src="/js/jquery-1.10.1.min.js?>"></script>
<script src="/js/html2canvas.js?>"></script>
<style>
* {
margin: 0;
}
canvas {
margin-right: 5px;
}
</style>
</head>
<body>
<div class="tablexqys">
<table>
<tbody>
<tr>
<th>开团时间</th>
<th>开团人</th>
<th>开团人数</th>
<th>开团详情</th>
</tr>
<tr>
<td class="ckan">2018.09.02 14:34</td>
<td class="ckan">6/6</td>
<td class="ckan">3人团</td>
<td class="ckan">查看</td>
</tr>
<tr>
<td colspan="4" style="height: 200px">
<img id="short" style="position:absolute; z-index:1; height: 15%;width: 30%" src="/web_style/web_img/v325/weichat-logo.png" />
</td>
</tr>
</tbody>
</table>
</div>
<!--页面最终生成的图片-->
<!--<div id="predict_img">
<div id="box" hidden style="position:absolute; z-index:1; height: 100px;width: 100px;padding:0px"></div>
</div>-->
<div style="width: 100%;height: 100%;">
<img src="" alt="" id="predict_img" style="width:100%;height:100%;">
</div>
<script>
//首先将内容生成一张图片
$(document).ready(function () {
createImg();
setTimeout(function(){
var predict_img = $("#predict_img").attr('src');
if(predict_img.length<=0){
location.href='/dev/standard/test_img';
}
},3000);
});
function createImg() {
//直接选择要截图的dom，就能截图，但是因为canvas的原因，生成的图片模糊
/*html2canvas(document.querySelector('div')).then(function(canvas) {
document.body.appendChild(canvas);
});*/
//创建一个新的canvas
var canvas2 = document.createElement("canvas");
//选择生成内容的容器
let _canvas = document.querySelector('.tablexqys');
//获取宽高
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('.tablexqys'), { canvas: canvas2 }).then(function(canvas) {
//将生成的页面追加到body后面
document.body.appendChild(canvas);
//生成以后，隐藏内容容器
document.querySelector('.tablexqys').style.display = 'none';
});*/
//触发截图方式二
/*html2canvas(document.querySelector('.tablexqys'), { canvas: canvas2 }).then(function(canvas) {
//canvas转换成url，然后利用a标签的download属性，直接下载，绕过上传服务器再下载
document.querySelector(".down").setAttribute('href', canvas.toDataURL());
//生成以后，隐藏内容容器
document.querySelector('.tablexqys').style.display = 'none';
});*/
//触发截图方式三
html2canvas(document.querySelector('.tablexqys'), { canvas: canvas2 }).then(function(canvas) {
//赋值的方式
getBase64Image(canvas.toDataURL());
//生成以后，隐藏内容容器
document.querySelector('.tablexqys').style.display = 'none';
});
//触发截图方式四
/*html2canvas(document.querySelector('.tablexqys')).then(function(canvas) {
var dataUrl = canvas.toDataURL();
var newImg = document.createElement("img");
newImg.src = dataUrl;
newImg.height = $(window).height();
newImg.width = $(window).width();
newImg.height = 300;
newImg.width = 300;
$("#box").show();
$("#box").html(newImg);
//生成以后，隐藏内容容器
document.querySelector('.tablexqys').style.display = 'none';
});*/
}
//转换成图片
function getBase64Image(imgurl) {
var img = new Image();
img.src = imgurl;
img.setAttribute('crossOrigin', 'anonymous');
img.οnlοad=function(){
var canvas = document.createElement("canvas");
canvas.width = 300;//这个设置不能丢，否者会成为canvas默认的300*150的大小
canvas.height = 300;//这个设置不能丢，否者会成为canvas默认的300*150的大小
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, 300, 300);
var dataURL = canvas.toDataURL("image/png");
$("#predict_img").attr("src",dataURL);
}
}
</script>
</body>
</html>
