web頁面水印(簡單、通用、強大、純js)
呼叫與效果
fnwatermark(,
textlist:
['您好,歡迎回家!']}
* 水印
* @param options
* }
* style :
* textlist : // 文字集合,每一項為字串型別,每一項佔一行
* xpadding : number // 左邊距 + 右邊距
* ypadding : number // 上邊距 + 下邊距
* rotate : number // 旋轉 取值 0 ~ 180
* }* @return 資料
*/function
fnwatermark
(options)
= options ||
;let
= style ||;if
(rotate >0)
if(create)
;for
(let key in createstyle)
// 新增到頁面文件中
document.body.
(el);}
elseif(
typeof el ===
'string')if
(!textlist || textlist.length ===0)
let width =0;
textlist.
foreach
(item =>})
;let textlistlength = textlist.length;
let height = textlistlength;
height *= fontsize;
width *= fontsize;
width += xpadding;
height +=
(textlistlength -1)
* fontsize;
//準備空畫布
let canvas = document.
createelement
('canvas');
canvas.width = width;
canvas.height = height + ypadding;
//取得畫布的2d繪圖上下文
let context = canvas.
getcontext
('2d');
// 設定字型
context.font = fontsize +
"px bold 黑體"
;// 設定顏色
context.fillstyle =
"#999"
; context.globalalpha =
0.12
;// 設定水平對齊方式
context.textalign =
"center"
;// 設定垂直對齊方式
context.textbaseline =
"middle"
;// 旋轉
context.
rotate
(rotate /
180);if
(style)
}// 繪製文字(引數:要寫的字,x座標,y座標)
let textheight = height /
(textlistlength +1)
; textlist.
foreach
((item, index)
=>);
let urldata = canvas.
todataurl
('image/png');
// 設定背景圖
if(el)
return urldata;
}
頁面水印功能控制項
根據要求,最近要做乙個頁面水印的功能,找了寫網上資料,整合了乙個水印控制項,直接上 注釋都很清楚 function 採用配置項替換預設值,作用類似jquery.extend if arguments.length 1 typeof arguments 0 object extend this.def...
js生成頁面水印
獲取想要插入水印的文件節點的頂點座標值x,y。獲取文件節點的高度heigt和寬度width。用div包裹文本來生成水印。定義好div的長寬高間距等各種屬性。定義虛擬節點createdocumentfragment 包裹水印文件。先進行行 hang 迴圈,一行一行生成水印,以x,y為初始座標,生成乙個...
web最簡單頁面跳轉
ab utf 8 最簡單超連結 title head a target blank 4399小遊戲 a flash 18012.htm target blank 植物大戰殭屍 a c1 第乙個標題 a c2 第二個標題 a c1 第乙個題標 a 跳轉我就是第乙個標題 西安v從 湊行數湊行數 湊行數湊...