PC端/移动端html2canvas实现截屏，对图片添加水印文字，最后实现图片导出

相信有不少人遇到过这种需求：

要求对HTML页面的某个区域实现截屏为图片，以供分享保存。

比如一个DIV中table数据是用户点击，ajax获取，dom操作，js计算等等操作生成的一组数据，这些数据用户有需求保存下来。

如图：



截图效果类似：



需求分析：点击导出结果，实现table投注策略导出

html代码

<script type="text/javascript" src="{$Think.LEC_URL}js/html2canvas.min.js"></script>
<div class="tabbox">
<table id="plantable">
<tr class="head">
<td nowrap>序号</td>
<td nowrap>中否</td>
<td nowrap>倍数</td>
<td nowrap>当期投</td>
<td nowrap>累计投</td>
<td nowrap>本期中</td>
<td nowrap>本期赚</td>
<td nowrap>净赚</td>
<td nowrap>下期倍数</td>
<td nowrap>余额</td>
<td nowrap>累计中</td>
</tr>
<tbody id='tbody'></tbody>
</table>
</div>
<a id="exportdata" class="ttright bghcolor" onclick="taoge();">导出结果</a>
//以下标签为辅助，各有作用
<div id="hidepic" style="display:none;"></div>
<div style="display:none;">
<canvas id="myCanvas">
</canvas>
</div>
<a style="display:none;" class="down" href="" download="downImg.jpg">下载</a>

js图片导出，图片编辑，触发下载保存等

function taoge(){
if($('#tbody').text()==''){
common.tipOpen('请先进行投注策略计算，再进行结果导出！',false,true,2);
return false;
}
$('body').scrollTop(0); //移动端使用：此处可以弥补截图区域过大导致页面有滚动条后，产生的网页截图不完整，不可见区域截取不到
html2canvas(document.querySelector('#plantable'),{
allowTaint:true,
height: $("#plantable").outerHeight() + 20
}).then(function(canvas) {
$('#hidepic').html(canvas);   //生成的原始canvas画布保留以备其他使用
if(common.ismobile()){  //移动端判断
var img = new Image();
var canvas1=document.getElementById("myCanvas");
// 设置宽高
canvas1.width=canvas.width;//注意：没有单位
canvas1.height=canvas.height;//注意：没有单位
var ctx=canvas1.getContext("2d");
if(img.complete) {
img.src = canvas.toDataURL(); //由于图片异步加载，一定要等img加载好，再设置src属性
img.onload = function() {
// 绘制图片
ctx.drawImage(img,0,0);
// 绘制水印
ctx.font="20pt Calibri";  //水印文字添加
ctx.fillStyle = "rgba(0,0,0,0.8)";
ctx.fillText("提示：长按保存投注记录",250,80);
ctx.strokeText("提示：长按保存投注记录",250,80);
//canvas转换成url，然后利用a标签的download属性，直接下载，绕过上传服务器再下载
document.querySelector(".down").setAttribute('href',canvas1.toDataURL());
$('.down')[0].click(); //a标签触发下载 注意triggle('click')是不能使用的
}
}
}else{
document.querySelector(".down").setAttribute('href',canvas.toDataURL());
$('.down')[0].click();
}

});
}