canvas水印

主要记录水印部分，如下：

HTML和CSS就不写了

JavaScript封装的部分：

function time(split) {
    let date = new Date();
    let year = date.getFullYear();
    let month = date.getMonth() + 1;
    let day = date.getDate();
    let hour = date.getHours();
    let min = date.getMinutes();
    let sec = date.getSeconds();
    return (year + split +(month>9 ? month : '0' + month) + split + (day>9 ? day : '0' + day) + " " + (hour>9 ? hour : '0' + hour) +":" + (min>9 ? min : '0' + min) +":" + (sec>9 ? sec : '0' + sec));
}

function Watermark(wmContent,Option) {
    this.content = wmContent,
    this.options = Option
}

//添加画布并设置文字水印样式
Watermark.prototype.init = function(){
    let body = document.getElementsByTagName('body')[0];
    for(let allAttr of this.options.template){
        let canvas = document.createElement("canvas");
        for(let aloneAttr in allAttr){
            canvas.setAttribute(aloneAttr,allAttr[aloneAttr]);
        }
        body.appendChild(canvas);
    }
    let template = document.getElementById(this.options.template[0].id);
    let templateStyle = template.getContext('2d');
    templateStyle.globalAlpha =this.options.globalAlpha;
    templateStyle.clearRect(0,0,this.options.template.width,this.options.template.height);
    templateStyle.font = this.options.font;
    templateStyle.rotate(this.options.rotate);
    templateStyle.fillStyle = this.options.color;
    for(let tem of this.content){
        if(tem.type == 'text' || tem.type == undefined){
            templateStyle.fillText(tem.text,tem.x,tem.y);
        }else if(tem.type == 'image'){
            let wmImg = document.getElementById(tem.imgID);
            templateStyle.drawImage(wmImg,tem.x,tem.y);
        }
    }
    this.options.template.length == 2 ? this.repeatUltimate(template) : this.repeatUltimate(body,template);
}

//渲染
Watermark.prototype.repeatUltimate = function(){
    if(arguments.length == 2){
        // 渲染方式
        //  1 -- 背景图
        arguments[0].style.backgroundImage = 'url('+arguments[1].toDataURL()+')';
    }else{
        //  2 -- canvas渲染
        let ultimate = document.getElementById(this.options.template[1].id);
        ultimate = ultimate.getContext('2d');
        ultimate.clearRect(0,0,this.options.template[1].width,this.options.template[1].height);
        let repeat = ultimate.createPattern(arguments[0],'repeat');
        ultimate.fillStyle = repeat;
        ultimate.fillRect(0,0,this.options.template[1].width,this.options.template[1].height);
    }
}

调用方法：

// 设置水印内容和位置
let wmContentAndPosition = [{
        type:'text',//type属性默认为text，不定义亦可
        text: '052977 WE丕样',// 工号 姓名（昵称）
        x:75,
        y:155
    },{
        text: time('-'),// 最近登录时间
        x: -15,
        y: 70
    },{
        type:'image',//如果水印中有需要加图片图标之类的，设置type类型为image，
        imgID:'bgImg',//填写html结构中的图标img的id即可
        x:40,
        y:142
    }
];
let setOption = {
    //当template的长度等于1时，使用body背景图repeat做页面水印
    //当长度等于2时，则使用canvas做水印，此时在无其他元素遮挡且允许右键的情况下可以保存水印图片
    template:[
        {    //    生成初始模板 可以设置元素的各种属性
            width: '250px',
            height: '150px',
            id: 'watermark',
            style: 'display:none;'
        },
        {    //    生成最终结果，用来平铺初始模板
            width: window.screen.availWidth,
            height: window.screen.availHeight,
            id: 'repeat-watermark',
            class: 'watermarkBgImg',
            // style: 'display:none;'
        }
    ],
    font: '12px 微软雅黑',//    定义文字大小、字体
    rotate: -20*Math.PI/180,   //   文字倾斜角度
    color: 'rgb(255,255,255)', //  文字颜色
    globalAlpha: 0.3
};
let wm = new Watermark(wmContentAndPosition,setOption);
wm.init();

 

最终效果：