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();
      }         

  });
}