Shulou(Shulou.com)06/01 Report--

This article introduces the knowledge of "how to add a watermark mask layer in HTML". Many people will encounter this dilemma in the operation of actual cases, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Code:

Watermark mask .watermark _ mask {position: fixed; top: 10px;} .hello {width: 500px; height: 2048px; margin: 0 auto; background-color: pink;} Hello World Hello World 2 Hello World 3 const watermarkId = "watermarkId" / / Watermark masking function function watermarkUtils (settings, id) {/ / default setting var defaultSettings= {watermark_txt: "text", watermark_x: 10 watermark_txt / watermark starting position x-axis coordinates watermark_y: 20 recoverable / watermark starting position Y-axis coordinates watermark_rows: 55 / / number of watermark lines watermark_cols: 55 dagger / number of watermark columns watermark_x_space: 10 dagger / watermark x-axis interval watermark_y_space: 10 dagger / watermark y-axis interval watermark_color:'# 0000000 pound pound / watermark font color watermark_alpha: 0.2 / / watermark transparency watermark_fontsize: '15pxmarker gray stroke / watermark font size watermark_font:' Microsoft elegant black', / / watermark font watermark_width: 50 pound / watermark width watermark_height: 20 pound / watermark length watermark_angle: 25 pound / watermark tilt degree} / / replace the default value with a configuration item, which is similar to jquery.extend if (typeof settings = "object") {var src = settings; for (let key in src) {if (SRC [key] & & defaultSettings [key] & & src [key] = = defaultSettings [key]) continue Else if (SRC [key]) defaultSettings [key] = src [key];}} var oTemp = document.createDocumentFragment (); / / var oTemp = document.createElement ("div"); / / get the maximum page width var page_width = Math.max (document.body.scrollWidth,document.body.clientWidth) / / get the maximum page length var page_height = Math.max (document.body.scrollHeight,document.body.clientHeight) / / if the number of watermark columns is set to 0, or the number of watermark columns is set too large, exceeding the maximum width of the page Recalculate the number of watermark columns and the watermark x-axis interval 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)) {defaultSettings.watermark_cols = parseInt ((page_width-defaultSettings.watermark_x+defaultSettings.watermark_x_space) / (defaultSettings.watermark) _ width + defaultSettings.watermark_x_space)) DefaultSettings.watermark_x_space = parseInt ((page_width-defaultSettings.watermark_x-defaultSettings.watermark_width * defaultSettings.watermark_cols) / (defaultSettings.watermark_cols-1)) } / / if the number of watermark lines is set to 0, or the number of watermark lines is set too large to exceed the maximum length of the page Then recalculate the number of watermark lines and the watermark y-axis interval 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)) {defaultSettings.watermark_rows = parseInt ((defaultSettings.watermark_y_space + page_height-defaultSettings.watermark_y) / (defaultSettings) .watermark _ height + defaultSettings.watermark_y_space)) DefaultSettings.watermark_y_space = parseInt (page_height-defaultSettings.watermark_y)-defaultSettings.watermark_height * defaultSettings.watermark_rows) / (defaultSettings.watermark_rows-1));} var x; var y; for (var I = 0; I

< defaultSettings.watermark_rows; i++) { y = defaultSettings.watermark_y + (defaultSettings.watermark_y_space + defaultSettings.watermark_height) * i; for (var j = 0; j < defaultSettings.watermark_cols; j++) { x = defaultSettings.watermark_x + (defaultSettings.watermark_width + defaultSettings.watermark_x_space) * j; var mask_div = document.createElement('div'); mask_div.id = 'mask_div' + i + j; mask_div.appendChild(document.createTextNode(defaultSettings.watermark_txt)); //设置水印div倾斜显示 mask_div.style.webkitTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)"; mask_div.style.MozTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)"; mask_div.style.msTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)"; mask_div.style.OTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)"; mask_div.style.transform = "rotate(-" + defaultSettings.watermark_angle + "deg)"; mask_div.style.visibility = ""; mask_div.style.position = "absolute"; //选不中 mask_div.style.left = x + 'px'; mask_div.style.top = y + 'px'; mask_div.style.overflow = "hidden"; mask_div.style.zIndex = "9999"; mask_div.style.pointerEvents = "none"; //mask_div.style.border="solid #eee 1px"; mask_div.style.opacity = defaultSettings.watermark_alpha; mask_div.style.fontSize = defaultSettings.watermark_fontsize; mask_div.style.color = defaultSettings.watermark_color; mask_div.style.textAlign = "center"; mask_div.style.width = defaultSettings.watermark_width + 'px'; mask_div.style.height = defaultSettings.watermark_height + 'px'; mask_div.style.display = "block"; oTemp.appendChild(mask_div); }; }; // document.body.appendChild(oTemp); try { // console.log(document.getElementById(id), "document.getElementById(id)"); document.getElementById(id).appendChild(oTemp); } catch(error) { console.error(error, "遮罩异常"); } }; watermarkUtils({ watermark_txt: "9527", watermark_width: 60, watermark_fontsize: "14px" }, watermarkId); 核心代码： const watermarkId = "watermarkId";// 水印遮罩函数function watermarkUtils(settings, id) { //默认设置 var defaultSettings={ watermark_txt: "text", watermark_x: 10,//水印起始位置x轴坐标 watermark_y: 20,//水印起始位置Y轴坐标 watermark_rows: 55,//水印行数 watermark_cols: 55,//水印列数 watermark_x_space: 10,//水印x轴间隔 watermark_y_space: 10,//水印y轴间隔 watermark_color: '#000000',//水印字体颜色 watermark_alpha: 0.2,//水印透明度 watermark_fontsize: '15px',//水印字体大小 watermark_font: '微软雅黑',//水印字体 watermark_width: 50,//水印宽度 watermark_height: 20,//水印长度 watermark_angle: 25//水印倾斜度数 }; //采用配置项替换默认值，作用类似jquery.extend if(typeof settings === "object") { var src = settings; for(let key in src) { if(src[key] && defaultSettings[key] && src[key] === defaultSettings[key]) continue; else if(src[key]) defaultSettings[key]=src[key]; } } var oTemp = document.createDocumentFragment(); // var oTemp = document.createElement("div"); //获取页面最大宽度 var page_width = Math.max(document.body.scrollWidth,document.body.clientWidth); //获取页面最大长度 var page_height = Math.max(document.body.scrollHeight,document.body.clientHeight); //如果将水印列数设置为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)) {defaultSettings.watermark_cols = parseInt ((page_width-defaultSettings.watermark_x+defaultSettings.watermark_x_space) / (defaultSettings.watermark_width + defaultSettings.watermark_x_space)); defaultSettings.watermark_x_space = parseInt ((page_width-defaultSettings.watermark_x-defaultSettings.watermark_width * defaultSettings.watermark_cols) / (defaultSettings.watermark_cols-1) } / / if the number of watermark lines is set to 0, or the number of watermark lines is set too large to exceed the maximum length of the page Then recalculate the number of watermark lines and the watermark y-axis interval 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)) {defaultSettings.watermark_rows = parseInt ((defaultSettings.watermark_y_space + page_height-defaultSettings.watermark_y) / (defaultSettings.watermark_height + defaultSettings.watermark_y_space) DefaultSettings.watermark_y_space = parseInt (page_height-defaultSettings.watermark_y)-defaultSettings.watermark_height * defaultSettings.watermark_rows) / (defaultSettings.watermark_rows-1));} var x; var y; for (var I = 0; I < defaultSettings.watermark_rows; I +) {y = defaultSettings.watermark_y + (defaultSettings.watermark_y_space + defaultSettings.watermark_height) * I; for (var j = 0 J < defaultSettings.watermark_cols; jacks +) {x = defaultSettings.watermark_x + (defaultSettings.watermark_width + defaultSettings.watermark_x_space) * j; var mask_div = document.createElement ('div'); mask_div.id =' mask_div' + I + j; mask_div.appendChild (document.createTextNode (defaultSettings.watermark_txt)) / / set watermark div tilt display mask_div.style.webkitTransform = "rotate (-" + defaultSettings.watermark_angle + "deg)"; mask_div.style.MozTransform = "rotate (-" + defaultSettings.watermark_angle + "deg)"; mask_div.style.msTransform = "rotate (-" + defaultSettings.watermark_angle + "deg)" Mask_div.style.OTransform = "rotate (-" + defaultSettings.watermark_angle + "deg)"; mask_div.style.transform = "rotate (-" + defaultSettings.watermark_angle + "deg)"; mask_div.style.visibility = ""; mask_div.style.position = "absolute"; / / not selected mask_div.style.left = x + 'px' Mask_div.style.top = y + 'px'; mask_div.style.overflow = "hidden"; mask_div.style.zIndex = "9999"; mask_div.style.pointerEvents = "none"; / / mask_div.style.border= "solid # eee 1px"; mask_div.style.opacity = defaultSettings.watermark_alpha Mask_div.style.fontSize = defaultSettings.watermark_fontsize; mask_div.style.color = defaultSettings.watermark_color; mask_div.style.textAlign = "center"; mask_div.style.width = defaultSettings.watermark_width + 'px'; mask_div.style.height = defaultSettings.watermark_height +' px'; mask_div.style.display = "block" OTemp.appendChild (mask_div);};}; / / document.body.appendChild (oTemp); try {/ / console.log (document.getElementById (id), "document.getElementById (id)"); document.getElementById (id) .appendChild (oTemp);} catch (error) {console.error (error, "mask exception");}} / / use watermarkUtils ({watermark_txt: "9527", watermark_width: 60, watermark_fontsize: "14px"}, watermarkId); "how to add a watermark mask layer in HTML" ends here. Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.