<!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>
Javascript给Html添加水印(二)
猜你喜欢
转载自blog.csdn.net/qq_24432127/article/details/102973721
今日推荐
周排行