Javascript给Html添加水印(二)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>背景添加水印</title>
</head>

<body>

</body>

<script>
    ;
    (function (undefined) {
        'use strict'
        var _global;

        var toolFunc = {
            //工具函数对象
            extend: function extend(o, n, override) {
                //对象合并函数
                for (var key in n) {
                    if (n.hasOwnProperty(key) && (!o.hasOwnProperty(key) || override)) {
                        o[key] = n[key];
                    }
                }
                return o;
            }
        }
        
        function WaterMarker(option) {
            this._initial(option);
        }

        WaterMarker.prototype = {
            constructor: this,
            _initial: function (option) {
                var defineparameter = {
                    targetContainer: null, //设置显示水印的容器dom
                    Text: '', //设置画布水印显示的文本
                    canvasWidth: 0, //设置画布宽度
                    canvasHeight: 0, //设置画布高度
                    Rotate: 0, //设置画布旋转度
                    Font: '14px Microsoft JhengHei', //设置显示文本样式
                    TextAlign: 'left', //设置文本水平对齐方式
                    TextBaseline: 'Middle', //设置文本垂直对齐方式
                    FillText_X: 0, //设置绘制文本的 x 坐标位置（相对于画布）。
                    FillText_Y: 0, //设置绘制文本的 y 坐标位置（相对于画布）。
                    FillStyle: 'rgba(17, 17, 17, 0.50)', //设置或返回用于填充绘画的颜色、渐变或模式。
                }
                this.defineparameter = toolFunc.extend(option, defineparameter);
            },
            _setcanvas: function (parameter) {
                //生成水印画布
                var canvas = document.createElement('canvas');
                canvas.width = parameter.canvasWidth;
                canvas.height = parameter.canvasHeight;
                canvas.style.display = 'none';

                var setCanvas = canvas.getContext('2d');
                setCanvas.rotate(parameter.Rotate);
                setCanvas.font = parameter.Font;
                setCanvas.fillStyle = parameter.FillStyle;
                setCanvas.textAlign = parameter.TextAlign
                setCanvas.textBaseline = parameter.TextBaseline
                setCanvas.fillText(parameter.Text, parameter.FillText_X, parameter.FillText_Y);
                return canvas;
            },
            _setimage: function (parameter ,draw_canvas) {
                //背景容器添加画布显示水印
                parameter.targetContainer.appendChild(draw_canvas);
                parameter.targetContainer.style.backgroundImage = 'url(' + draw_canvas.toDataURL(
                    'image/png') + ')';
                parameter.targetContainer.removeChild(draw_canvas);
            },
            _emptyimage : function(parameter){
                //背景容器清空背景水印
                parameter.targetContainer.style.backgroundImage = '';
            },
            draw: function () {
                var canvasImage = this._setcanvas(this.defineparameter);
                this._setimage( this.defineparameter ,canvasImage);
            },
            erase:function(){
                this._emptyimage(this.defineparameter);
            }
        }

        // 最后将插件对象暴露给全局对象
        _global = (function () {
            return this || (0, eval)('this');
        }());
        if (typeof module !== "undefined" && module.exports) {
            module.exports = WaterMarker;
        } else if (typeof define === "function" && define.amd) {
            define(function () {
                return WaterMarker;
            });
        } else {
            !('WaterMarker' in _global) && (_global.WaterMarker = WaterMarker);
        }
    }())

    var parameter = {
        targetContainer: document.body,
        Text: '显示水印文本',
        canvasWidth: 400,
        canvasHeight: 200, 
        Rotate: -20 * Math.PI / 180,
        FillText_X: 400 / 3,
        FillText_Y: 200 / 2
    }
    var waterMarker = new WaterMarker(parameter);

    waterMarker.draw();
    parameter.Text = '13123123123';
    waterMarker.draw();
    parameter.Text = '动态变化';
    parameter.Rotate = 0;
    waterMarker.draw();
    //waterMarker.erase();

</script>

</html>
丷釷枫丷
发布了60 篇原创文章 · 获赞 10 · 访问量 2万+
私信关注
Javascript给Html添加水印(二)

猜你喜欢
