HTML Table元素加水印（超出范围不显示）

r囧r小猫 2021-09-23 16:50 328阅读 0赞

**首先说明**：有三个文件：1个H5，一个js（代码较长），一个水印js插件（地址：[https://code.jquery.com/jquery-git.js][https_code.jquery.com_jquery-git.js]）

所有代码已经上传到github：[作者水印github位置][github]

**备注**：经过测试，该效果在IE7.8.9版本下无法显示水印，其他浏览器版本都可以

--------------------

**网页效果图：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hb3ppeWFuZzE5OTY_size_16_color_FFFFFF_t_70][]

HTML代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
    </head>
    <body>
    <table  border="0" width="800" height="800" align="center" cellpadding="0" cellspacing="0" id="table1" bgcolor="#008b8b">
        <tr align="center">
            <td>测试页面  测试页面</td>
            <td>测试页面  测试页面</td>
        </tr>
    </table>
    </body>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://code.jquery.com/jquery-git.js"></script>
    <script type="text/javascript" src="../js/shuiyin2.js" charset="utf-8"></script>
    <script type="text/javascript">
        var nowDay = getnowDay();
        var nowTime = getnowTime();
        $('#table1').watermark({
            texts : ["A B C X Y Z +"+nowDay,nowTime], //水印文字
            textColor : "#DCDCDC", //文字颜色
            textFont : '14px 微软雅黑', //字体
            width : 130, //水印文字的水平间距
            height : 120,  //水印文字的高度间距（低于文字高度会被替代）
            textRotate : -20 //-90到0， 负数值，不包含-90
        })
    </script>
    <script>
    
    </script>
    </html>

水印：shuiyin2.js代码：

(function(){
    
        var watermark = function(self){
            this.elem = self;
        }
    
        watermark.prototype = {
            defaults : {
                texts : ['此处水印文字'],
                width : 100, //每行水印文字的水平间距
                height : 100, //水印文字的高度间距（低于文字高度会被替代）
                textRotate : -30 , //文字旋转 度数
                textColor : '#ede8e8', //文字颜色
                textFont : '15px 微软雅黑' //字体
            },
            options : {
                canvas : []
            },
            init : function(options){
                $.extend(this.options, this.defaults, options);
                var $body = $('body'),
                    can1 = this.__createCanvas($body),
                    can2 = this.__createCanvas($body),
                    canAll = this.__createCanvas($body),
                    settings = this.options,
                    txtlen = settings.texts.length;
    
                settings.deg = settings.textRotate * Math.PI / 180; //js里的正弦余弦用的是弧度
    
                this.__calcTextSize($body);
                var repeatTimes = Math.ceil(screen.width / settings.txts.length / settings.width);
                settings.canvasWidth = settings.canvasWidth * repeatTimes;
                var extTxts = [];
                while(repeatTimes--) extTxts = extTxts.concat(settings.txts);
                settings.txts = extTxts;
    
                var fixH = settings.maxWidth * Math.abs(Math.sin(settings.deg)) + Math.cos(settings.deg) * settings.textHeight;
                if(fixH > settings.height) settings.height = fixH;
                var ctx1 = this.__setCanvasStyle(can1, settings.canvasWidth, settings.height);
                var ctx2 = this.__setCanvasStyle(can2, settings.canvasWidth, settings.height);
                var ctx = this.__setCanvasStyle(canAll, settings.canvasWidth, settings.height * 2, true);
    
                this.__drawText(ctx1, settings.txts);
                this.__drawText(ctx2, settings.txts.reverse());
    
                //合并canvas
                ctx.drawImage(can1, 0, 0, settings.canvasWidth, settings.height);
                ctx.drawImage(can2, 0, settings.height, settings.canvasWidth, settings.height);
                var dataURL = canAll.toDataURL("image/png");
                $(this.elem).css('backgroundImage', "url("+ dataURL +")");
                //this.__destory();
            },
            __createCanvas : function($container){
                var canvas = document.createElement('canvas');
                $container.append(canvas);
                this.options.canvas.push(canvas);
                return canvas;
            },
            __calcTextSize : function($container){
                var txts = [],
                    maxWidth = 0,
                    canvasWidth = 0,
                    settings = this.options;
                $.each(settings.texts, function(i, text){
                    var span = $('<span style="font:'+settings.textFont+';visibility: hidden;display: inline-block;"> '+text+ '</span>')
                        .appendTo($container);
                    var tWidth = span[0].offsetWidth,
                        tHeight = span[0].offsetHeight;
                    span.remove();
                    txts.push({
                        txt : text,
                        width : tWidth,
                        height : tHeight
                    });
                    maxWidth = Math.max(maxWidth, tWidth);
                    settings.textHeight = tHeight;
                    var shadow = Math.cos(settings.deg) * tWidth;
                    canvasWidth += (settings.width < shadow ? shadow : settings.width) - tHeight * Math.sin(settings.deg);
                });
                settings.txts = txts;
                settings.maxWidth = maxWidth;
                settings.canvasWidth = canvasWidth;
            },
            __setCanvasStyle : function(canvas, width, height, notextstyle){
                canvas.width = width;
                canvas.height = height;
                canvas.style.display='none';
    
                var ctx = canvas.getContext('2d');
                if(!notextstyle){
                    var deg = this.options.deg,
                        absSindeg = Math.abs(Math.sin(deg));
                    ctx.rotate(deg);
                    //基于视窗的 x、y偏移量
                    var offset = absSindeg * this.options.height - this.options.textHeight * absSindeg;
                    var nx = - offset * Math.cos(deg),
                        ny = - offset * absSindeg;
                    ctx.translate( nx, ny * absSindeg);
    
                    ctx.font = this.options.textFont;
                    ctx.fillStyle = this.options.textColor;
                    ctx.textAlign = 'left';
                    ctx.textBaseline = 'Middle';
                }
                return ctx;
            },
            __drawText: function(ctx, txts){
                var settings = this.options;
                $.each(txts, function(i, obj){
    
                    var wnap = (settings.maxWidth - obj.width) / 2 ;
                    var x = settings.width * Math.cos(settings.deg) * i,
                        y = - x * Math.tan(settings.deg) + settings.height;
                    ctx.fillText(obj.txt, x + wnap, y);
                });
            },
            __destory : function(){
                $.each(this.options.canvas, function(i, canvas){
                    canvas.remove();
                    canvas = null;
                });
            }
        }
    
        $.fn.watermark = function(options){
            new watermark(this).init(options);
        }
    
    })(jQuery);
    
    function getnowDay() {
        var d = new Date();
        var year = d.getFullYear();
        var month = change(d.getMonth() + 1);
        var day = change(d.getDate());
        function change(t) {
            if (t < 10) {
                return "0" + t;
            } else {
                return t;
            }
        }
        var time = year + '年' + month + '月' + day + '日 ';
        return time;
    }
    
    function getnowTime() {
        var d = new Date();
        var hour = change(d.getHours());
        var minute = change(d.getMinutes());
        var second = change(d.getSeconds());
        function change(t) {
            if (t < 10) {
                return "0" + t;
            } else {
                return t;
            }
        }
        var time = hour + '时' + minute + '分' + second + '秒';
        return time;
    }

[https_code.jquery.com_jquery-git.js]: https://code.jquery.com/jquery-git.js
[github]: https://github.com/MaoZiYang/HTML-Daily-Train/commit/0d4ab1f7e0a4d97ea80c42cdef35c8bd9df2e301
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hb3ppeWFuZzE5OTY_size_16_color_FFFFFF_t_70]: /images/20210923/f84e9b494614474cb91166c5b3d6c805.png

发表评论取消回复

表情：

评论列表（有 0 条评论，328人围观）

还没有评论，来说两句吧...

相关阅读

相关 Python PDF 加水印

Python PDF 加水印 from PyPDF2 import PdfWriter,PdfReader from reportlab.lib.units

今天药忘吃喽~/ 2024年03月24日 17:41/ 0 赞/ 67 阅读

相关页面加水印

[Android为页面添加水印\_x-dialog加上水印\_Fantasy丶Lin的博客-CSDN博客][Android_x-dialog_Fantasy_Lin_-CSDN

深碍√TFBOYSˉ_/ 2023年10月08日 23:26/ 0 赞/ 63 阅读

相关 uniApp图片加水印

这个代码直接拿走运行没啥大问题，但是，建议开发的时候，如果遇到加水印，别多选图片，没找到什么原因，就是绘制的不理想，一张一张来，可以 <template>

落日映苍穹つ/ 2022年12月20日 01:25/ 0 赞/ 779 阅读

相关 js页面加水印

let watermark = {} / @param {要设置的水印的内容} str @param {需要设置水印的容器}

绝地灬酷狼/ 2022年12月15日 06:10/ 0 赞/ 228 阅读

相关 dedecms缩略图不加水印文章页图片加水印的方法

[http://www.dede58.com/a/dedejq/16308.html][http_www.dede58.com_a_dedejq_16308.html] 解决

古城微笑少年丶/ 2022年12月03日 12:55/ 0 赞/ 235 阅读

相关 uniapp图片加水印

uniapp图片加水印废话没有，直接上代码看效果 <template> <view class="content"> <canvas st

分手后的思念是犯贱/ 2022年11月20日 09:33/ 0 赞/ 703 阅读

相关 java 图片加水印

![复制代码][copycode.gif] package com.bomei.image; import java.awt.Color;

清疚/ 2022年02月15日 03:19/ 0 赞/ 409 阅读

相关 excel 导出加水印

这个excel加水印，和你想象的可能有点区别，只是在excel上面添加了几张透明的图片吧。而且还是可编辑可删除的。要是需要不可编辑的，那么给这个excel加密吧。地下代码也是在

阳光穿透心脏的1/2处/ 2022年02月01日 02:35/ 0 赞/ 370 阅读

相关 HTML Table元素加水印（超出范围不显示）

首先说明：有三个文件：1个H5，一个js（代码较长），一个水印js插件（地址：[https://code.jquery.com/jquery-git.js][https_

r囧r小猫/ 2021年09月23日 16:50/ 0 赞/ 329 阅读

相关 ffmpeg加水印

一、`ffmpeg`加水印命令，主要从直播和视频文件加水印 1）直播推流加水印示例 ffmpeg -i rtmp://localhost/live/name

我不是女神ヾ/ 2021年06月26日 16:06/ 0 赞/ 860 阅读