简单的水印

style

<style>
    table {
      width: 50%;
      text-align: center;
      border-collapse: collapse;
    }
    table,table tr th, table tr td {
      border: 1px solid #ccc;
    }
    canvas {
      display: none;
    }
</style>

html

<table width="100%" align="center">
  <caption>不需要水印的表格</caption>
  <tr>
    <th>user</th>
    <th>pswd</th>
  </tr>
  <tr>
    <td>whorgb</td>
    <td>12345</td>
  </tr>
  <tr>
    <td>whorgb</td>
    <td>12345</td>
  </tr>
  <tr>
    <td>whorgb</td>
    <td>12345</td>
  </tr>
  <tr>
    <td>whorgb</td>
    <td>12345</td>
  </tr>
  <tr>
    <td>whorgb</td>
    <td>12345</td>
  </tr>
  <tr>
    <td>whorgb</td>
    <td>12345</td>
  </tr>
</table>

<table id="table" width="100%" align="center">
  <caption>需要文字水印的表格</caption>
  <tr>
    <th>user</th>
    <th>pswd</th>
  </tr>
  <tr>
    <td>whorgb</td>
    <td>12345</td>
  </tr>
  <tr>
    <td>whorgb</td>
    <td>12345</td>
  </tr>
  <tr>
    <td>whorgb</td>
    <td>12345</td>
  </tr>
  <tr>
    <td>whorgb</td>
    <td>12345</td>
  </tr>
  <tr>
    <td>whorgb</td>
    <td>12345</td>
  </tr>
  <tr>
    <td>whorgb</td>
    <td>12345</td>
  </tr>
  <tr>
    <td>whorgb</td>
    <td>12345</td>
  </tr>
  <tr>
    <td>whorgb</td>
    <td>12345</td>
  </tr>
  <tr>
    <td>whorgb</td>
    <td>12345</td>
  </tr>
  <tr>
    <td>whorgb</td>
    <td>12345</td>
  </tr>
  <tr>
    <td>whorgb</td>
    <td>12345</td>
  </tr>
  <tr>
    <td>whorgb</td>
    <td>12345</td>
  </tr>
</table>
<canvas id="canvas" width="130" height="150"></canvas>

<table id="tableA" width="100%" align="center">
  <caption>需要图片水印的表格</caption>
  <tr>
    <th>user</th>
    <th>pswd</th>
  </tr>
  <tr>
    <td>whorgb</td>
    <td>12345</td>
  </tr>
  <tr>
    <td>whorgb</td>
    <td>12345</td>
  </tr>
  <tr>
    <td>whorgb</td>
    <td>12345</td>
  </tr>
  <tr>
    <td>whorgb</td>
    <td>12345</td>
  </tr>
  <tr>
    <td>whorgb</td>
    <td>12345</td>
  </tr>
  <tr>
    <td>whorgb</td>
    <td>12345</td>
  </tr>
</table>
<canvas id="canvasA" width="80" height="80"></canvas>

script

/* 日期格式化，之前有写过 */
<script>
  Date.prototype.pattern = function(fmt) {
    var o = {
      "M+" : this.getMonth()+1, //月份
      "d+" : this.getDate(), //日
      "h+" : this.getHours()%12 == 0 ? 12 : this.getHours()%12, //小时
      "H+" : this.getHours(), //小时
      "m+" : this.getMinutes(), //分
      "s+" : this.getSeconds(), //秒
      "q+" : Math.floor((this.getMonth()+3)/3), //季度
      "S" : this.getMilliseconds() //毫秒
    };
    var week = {
      "0" : "/u65e5",
      "1" : "/u4e00",
      "2" : "/u4e8c",
      "3" : "/u4e09",
      "4" : "/u56db",
      "5" : "/u4e94",
      "6" : "/u516d"
    };
    if(/(y+)/.test(fmt)){
      fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
    }
    if(/(E+)/.test(fmt)){
      fmt=fmt.replace(RegExp.$1, ((RegExp.$1.length>1) ? (RegExp.$1.length>2 ? "/u661f/u671f" : "/u5468") : "")+week[this.getDay()+""]);
    }
    for(var k in o){
      if(new RegExp("("+ k +")").test(fmt)){
        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
      }
    }
    return fmt;
  };
  +function () {
    var text = "whorgb(王二狗)";
    var date = new Date().pattern("yyyy-MM-dd HH:mm:ss");
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    ctx.font = "16px Arial";
    ctx.rotate(-Math.PI/4);
    ctx.globalAlpha = 0.15;
    ctx.fillText(text,-100,120);
    ctx.fillText(date,-80,90);
    document.getElementById('table').style.background = 'url(' + canvas.toDataURL("image/png") + ')';
  }();
  +function () {
    var canvas = document.getElementById("canvasA");
    var ctx = canvas.getContext("2d");
    var img = new Image();
    img.src = "./assets/watermarkgreynoborder.png";
    img.onload = function(){
      ctx.drawImage(this, 0, 0);
      ctx.globalAlpha = 0.1;
      document.getElementById('tableA').style.background = 'url(' + canvas.toDataURL("image/png") + ')';
    };
  }();
</script>

img

watermarkgreynoborder.png

问题

任何一个懂得打开控制台的同学都可以轻松的将这种方法的水印去掉，如何避免？更好的方法是什么？

最后编辑于：2021.07.04 19:36:54