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>yhguo</td>
<td>12345</td>
</tr>
<tr>
<td>yhguo</td>
<td>12345</td>
</tr>
<tr>
<td>yhguo</td>
<td>12345</td>
</tr>
<tr>
<td>yhguo</td>
<td>12345</td>
</tr>
<tr>
<td>yhguo</td>
<td>12345</td>
</tr>
<tr>
<td>yhguo</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>yhguo</td>
<td>12345</td>
</tr>
<tr>
<td>yhguo</td>
<td>12345</td>
</tr>
<tr>
<td>yhguo</td>
<td>12345</td>
</tr>
<tr>
<td>yhguo</td>
<td>12345</td>
</tr>
<tr>
<td>yhguo</td>
<td>12345</td>
</tr>
<tr>
<td>yhguo</td>
<td>12345</td>
</tr>
<tr>
<td>yhguo</td>
<td>12345</td>
</tr>
<tr>
<td>yhguo</td>
<td>12345</td>
</tr>
<tr>
<td>yhguo</td>
<td>12345</td>
</tr>
<tr>
<td>yhguo</td>
<td>12345</td>
</tr>
<tr>
<td>yhguo</td>
<td>12345</td>
</tr>
<tr>
<td>yhguo</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>yhguo</td>
<td>12345</td>
</tr>
<tr>
<td>yhguo</td>
<td>12345</td>
</tr>
<tr>
<td>yhguo</td>
<td>12345</td>
</tr>
<tr>
<td>yhguo</td>
<td>12345</td>
</tr>
<tr>
<td>yhguo</td>
<td>12345</td>
</tr>
<tr>
<td>yhguo</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 = "YanHongGuo(郭艳泓)";
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

最终demo

问题
任何一个懂得打开控制台的同学都可以轻松的将这种方法的水印去掉,如何避免?更好的方法是什么?
网友评论