Vue implements adding watermark effect to the page

Recently, when I was working on a project, I was asked to add a watermark effect to the page. Without further ado, here is the code:

export function watermark(settings) {
  debugger;
  //Default settings var defaultSettings = {
      watermark_txt:"text",
      watermark_x:20, // watermark starting position x-axis coordinate watermark_y:20, // watermark starting position y-axis coordinate watermark_rows:5, // watermark rows watermark_cols:10, // watermark columns watermark_x_space:100, // watermark x-axis interval watermark_y_space:100, // watermark y-axis interval watermark_color:'#aaa', // watermark font color watermark_alpha:0.4, // watermark transparency watermark_fontsize:'15px', // watermark font size watermark_font:'Microsoft YaHei', // watermark font watermark_width:210, // watermark width watermark_height:80, // watermark length watermark_angle:15 // watermark tilt degree };
  //Use configuration items to replace default values, similar to jquery.extend
  if (arguments.length===1&&typeof arguments[0] ==="object" )
  {
      var src=arguments[0]||{};
      for(var keyS in src)
      {
          if (src[keyS]&&defaultSettings[keyS]&&src[keyS]===defaultSettings[keyS])
              continue;
          else if(src[keyS])
              defaultSettings[keyS]=src[keyS];
      }
  }

  var oTemp = document.createDocumentFragment();

  //Get the maximum width of the page var page_width = Math.max(document.body.scrollWidth,document.body.clientWidth);
  var cutWidth = page_width*0.0150;
  var page_width=page_width-cutWidth;
  //Get the maximum height of the page var page_height = Math.max(document.body.scrollHeight,document.body.clientHeight)+650;
  // var page_height = document.body.scrollHeight+document.body.scrollTop;
  //If the number of watermark columns is set to 0, or the number of watermark columns is set too large and exceeds the maximum page width, 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) - 1);
      defaultSettings.watermark_x_space = parseInt((page_width - defaultSettings.watermark_x - defaultSettings.watermark_width * defaultSettings.watermark_cols) / (defaultSettings.watermark_cols - 1) - 10);
  }
  //If the number of watermark rows is set to 0, or the number of watermark rows is set too large and exceeds the maximum page length, recalculate the number of watermark rows 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.className = 'mask_div';
          mask_div.appendChild(document.createTextNode(defaultSettings.watermark_txt));
          //Set the watermark div to display tilted 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';//pointer-events:none makes the watermark not block the click event of the page//mask_div.style.border="solid #eee 1px";
          mask_div.style.opacity = defaultSettings.watermark_alpha;
          mask_div.style.fontSize = defaultSettings.watermark_fontsize;
          mask_div.style.fontFamily = defaultSettings.watermark_font;
          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);
}

Write this code in main.js, and then initialize this method in App, vue

created() {
    let userId = getCookie("userId")
    watermark({watermark_txt:userId+" "+timeFormate(new Date())})
  }

Pass the parameters you want to pass into this method

The final effect is

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

Vue implements adding watermark to uploaded pictures
How to use pictures and picture watermarks with hidden text information in Vue
Vue integrates PDF.js to implement PDF preview and add watermark steps
Vue implements page watermark function
Three ways to upload pictures using Vue
The Uploader of Vue+Vant on the mobile terminal realizes the functions of uploading, compressing and rotating pictures
Vue+elementUI implements form and image upload and verification function example
vue+elementUI realizes the picture upload function
Based on VUE, select and upload pictures and display them on the page (pictures can be deleted)
Vue realizes adding watermark to uploaded pictures (upgraded version)

<<: Summary of Common Commands for Getting Started with MySQL Database Basics

>>: mysql 8.0.20 winx64.zip compressed version installation and configuration method graphic tutorial