js網頁新增水印

2021-08-03 06:06:09 字數 2409 閱讀 4559

//

//改編摘自:

//hjl 2023年6月19日19:25:43

function watermark(settings) ;

//採用配置項替換預設值,作用類似jquery.extend

if(arguments.length===1&&typeof arguments[0] ==="object" )

;for(key in src)

}var otemp = document.createdocumentfragment();

//獲取頁面最大寬度

var page_width = math.max(document.body.scrollwidth,document.body.clientwidth);

var cutwidth = page_width*0.0150;

var page_width=page_width-cutwidth;

//獲取頁面最大高度

var page_height = math.max(document.body.scrollheight,document.body.clientheight)+450;

// var page_height = document.body.scrollheight+document.body.scrolltop;

//如果將水印列數設定為0,或水印列數設定過大,超過頁面最大寬度,則重新計算水印列數和水印x軸間隔

if (defaultsettings.watermark_cols == 0 || (parseint(defaultsettings.watermark_x + defaultsettings.watermark_width *defaultsettings.watermark_cols + defaultsettings.watermark_x_space * (defaultsettings.watermark_cols - 1)) > page_width))

//如果將水印行數設定為0,或水印行數設定過大,超過頁面最大長度,則重新計算水印行數和水印y軸間隔

if (defaultsettings.watermark_rows == 0 || (parseint(defaultsettings.watermark_y + defaultsettings.watermark_height * defaultsettings.watermark_rows + defaultsettings.watermark_y_space * (defaultsettings.watermark_rows - 1)) > page_height))

var x;

var y;

for (var i = 0; i < defaultsettings.watermark_rows; i++) ;

};}//對date的擴充套件,將 date 轉化為指定格式的string

//月(m)、日(d)、小時(h)、分(m)、秒(s)、季度(q) 可以用 1-2 個佔位符,

//年(y)可以用 1-4 個佔位符,毫秒(s)只能用 1 個佔位符(是 1-3 位的數字)

//例子:

//(new date()).format("yyyy-mm-dd hh:mm:ss.s") ==> 2006-07-02 08:09:04.423

//(new date()).format("yyyy-m-d h:m:s.s") ==> 2006-7-2 8:9:4.18

//author: meizz

date.prototype.format = function (fmt) ;

if (/(y+)/.test(fmt)) fmt = fmt.replace(regexp.$1, (this.getfullyear() + "").substr(4 - regexp.$1.length));

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 gettime()

原作者之前效果是這樣的 水印文字沒有指定換行 是根據寬度來的

並且加入了時間格式化的方法

因為業務需求是三行字 而且長度不一定  所以更改了下 效果如下

引入js

呼叫方法:

watermark();

js新增水印

watermark 傳入動態水印內容 function watermark settings 採用配置項替換預設值,作用類似jquery.extend if arguments.length 1 typeof arguments 0 object for key in src var otemp d...

給網頁新增水印

html js 改編摘自 hjl 2017年6月19日19 25 43 function watermark settings 採用配置項替換預設值,作用類似jquery.extend if arguments.length 1 typeof arguments 0 object for key i...

react網頁新增水印

原理 在頁面覆蓋乙個盒子,取消滑鼠事件,層級最高,透明,用canvas,繪製背景 為了防止內部資料洩露,拍照等等,水印可以新增登入人姓名,公司名等等 借鑑大神的 let watermark letsetwatermark str,option 建立乙個畫布 let can document.crea...