精华内容
下载资源
问答
  • mounted: function () { Watermark.set("水印内容") }
  • js vue 页面添加水印

    2019-09-27 01:05:27
    vue 微信页面添加水印 this.$nextTick(function() { watermark({ watermark_txt: "<div>" + '123' + "</div><div>" + '456' + "...

    vue 微信页面添加水印

                                   this.$nextTick(function() {
                                       watermark({ watermark_txt: "<div>" + '123' + "</div><div>" + '456' + "</div>"});
                                   })

     

     

     

    function watermark(settings) {
            //默认设置
            var defaultSettings={
              watermark_txt:"text",
              watermark_x:70,//水印起始位置x轴坐标
              watermark_y:10,//水印起始位置Y轴坐标
              watermark_rows:100,//水印行数
              watermark_cols:2,//水印列数
              watermark_x_space:60,//水印x轴间隔
              watermark_y_space:40,//水印y轴间隔
              watermark_color:'#aaa',//水印字体颜色
              watermark_alpha:0.3,//水印透明度
              watermark_fontsize:'.26rem',//水印字体大小
              watermark_width:60,//水印宽度
              watermark_height:60,//水印高度
              watermark_angle:10//水印倾斜度数
            };
            //采用配置项替换默认值,作用类似jquery.extend
            if(arguments.length===1&&typeof arguments[0] ==="object" )
            {
              var src=arguments[0]||{};
              for(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 page_width = Math.max(document.body.scrollWidth,document.body.clientWidth) - 30;
            //获取页面最大高度
    //        var page_height = Math.max(document.body.scrollHeight,document.body.clientHeight);
            var page_height = Math.max($("#iContainer").get(0).clientHeight,document.body.clientHeight,$("#iContainer").get(0).scrollHeight) - 20;
    //        var page_height = $("#iContainer").get(0).scrollHeight;
           // console.log(page_height,$("#iContainer").outerHeight());
            
       
            //如果将水印列数设置为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));
            }
            //如果将水印行数设置为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)) {
              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.innerHTML = 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 = "9999999";
                mask_div.style.pointerEvents = "none";
                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.lineHeight = '.32rem';
                mask_div.style.display = "inline-block";
                oTemp.appendChild(mask_div);
              };
            };
            console.log($('.mask_div:odd'));
            document.body.appendChild(oTemp);
            $('.mask_div:odd').css({left:defaultSettings.watermark_x + 'px'});
          $('.mask_div:even').css({right:defaultSettings.watermark_x + 'px'});
    }

    转载于:https://www.cnblogs.com/jtwbdm/p/11544246.html

    展开全文
  • vue 页面添加水印 ts

    2019-10-02 14:37:17
    "use strict"; // tslint:disable-next-line: only-arrow-functions const setWatermark: (str: any) => any = function(str: any) { const id: string = "1.23452384164.123412415";... if (docum...
    "use strict";

    // tslint:disable-next-line: only-arrow-functions
    const setWatermark: (str: any) => any = function(str: any) {
    const id: string = "1.23452384164.123412415";
    if (document.getElementById(id) !== null) {
    document.body.removeChild(document.getElementById(id) as any);
    }

    const can: any = document.createElement("canvas");
    can.width = 160;
    can.height = 180;

    const cans: any = can.getContext("2d");
    cans.rotate(-20 * Math.PI / 180);
    cans.font = "16px Vedana";
    cans.fillStyle = "rgba(200, 200, 200, 0.40)";
    cans.textAlign = "left";
    cans.textBaseline = "Middle";
    cans.fillText(str, can.width / 16, can.height / 2);

    const div = document.createElement("div");
    div.id = id;
    div.style.pointerEvents = "none";
    div.style.top = "70px";
    div.style.left = "240px";
    div.style.position = "fixed";
    div.style.zIndex = "100";
    div.style.width = document.documentElement.clientWidth - 10 + "px";
    div.style.height = document.documentElement.clientHeight - 100 + "px";
    div.style.background = "url(" + can.toDataURL("image/png") + ") left top repeat";
    document.body.appendChild(div);
    return id;
    };

    const watermark = {
    // 该方法只允许调用一次
    set: (str: any) => {
    let id = setWatermark(str);
    setInterval(() => {
    if (document.getElementById(id) === null) {
    id = setWatermark(str);
    }
    }, 500);
    window.onresize = () => {
    setWatermark(str);
    };
    }
    };
    export default watermark;

    转载于:https://www.cnblogs.com/chongtao/p/11201857.html

    展开全文
  • 今天小编就为大家分享一篇Vue实现页面添加水印功能,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Vue 页面中使用水印效果水印效果使用方法 水印效果 全屏水印 指定容器水印 使用方法 项目中新建一个 watermark.js 文件 let watermark = {} let setWatermark = (text, sourceBody) => { let id = ...

    Vue 页面中使用水印效果

    水印效果

    1. 全屏水印
      在这里插入图片描述

    2. 指定容器水印
      在这里插入图片描述

    使用方法

    1. 项目中新建一个 watermark.js 文件

      let watermark = {}
      
      let setWatermark = (text, sourceBody) => {
        let id = Math.random() * 10000 + '-' + Math.random() * 10000 + '/' + Math.random() * 10000
      
        if (document.getElementById(id) !== null) {
          document.body.removeChild(document.getElementById(id))
        }
      
        let can = document.createElement('canvas')
        can.width = 120 //设置水印之间的左右间距
        can.height = 80 //设置水印之间的上下间距
      
        let cans = can.getContext('2d')
        cans.rotate(-20 * Math.PI / 180)
        cans.font = '15px Vedana'
        cans.fillStyle = 'rgba(0, 0, 0, .5)'
        cans.textAlign = 'left'
        cans.textBaseline = 'Middle'
        cans.fillText(text, can.width / 20, can.height)
      
        let water_div = document.createElement('div')
        water_div.id = id
        water_div.style.pointerEvents = 'none'
        water_div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat'
        if (sourceBody) {
          water_div.style.width = '100%'
          water_div.style.height = '100%'
          sourceBody.appendChild(water_div)
        } else {
          water_div.style.top = '3px'
          water_div.style.left = '0px'
          water_div.style.position = 'fixed'
          water_div.style.zIndex = '100000'
          water_div.style.width = document.documentElement.clientWidth + 'px'
          water_div.style.height = document.documentElement.clientHeight + 'px'
          document.body.appendChild(water_div)
        }
      
        return id
      }
      
      /**
       *  该方法只允许调用一次
       *  @param:
       *  @text == 水印内容
       *  @sourceBody == 水印添加在哪里,不传就是body
       * */
      watermark.set = (text, sourceBody) => {
        let id = setWatermark(text, sourceBody)
        setInterval(() => {
          if (document.getElementById(id) === null) {
            id = setWatermark(text, sourceBody)
          }
        }, 2000)
        window.onresize = () => {
          setWatermark(text, sourceBody)
        }
      }
      
      export default watermark
      
    2. main.js 中引入 watermark.js

      // 引入水印文件地址
      import watermark from './util/watermark.js'
      Vue.prototype.$watermark = watermark
      
    3. 页面中使用
      this.$watermark.set(text,dom)

      参数说明是否必填
      text水印内容
      dom水印容器。若不传,则全屏水印,若传,则指定容器。

      (1)全屏水印

      <template>
        <div class="page">
        </div>
      </template>
      
      <script>
      export default {
        data() {
          return {};
        },
        mounted(){
          this.$watermark.set("水印")
        },
      };
      </script>
      
      <style scoped>
      .page{
        width: 100%;
        height: 100%;
        background-color: skyblue;
      }
      </style>
      

      (2)指定容器水印

      <template>
        <div class="page">
          <div ref="content" style="width: 500px;height: 500px;border: 2px solid red;"></div>
        </div>
      </template>
      
      <script>
      export default {
        data() {
          return {};
        },
        mounted(){
          this.$watermark.set("水印",this.$refs.content)
        },
      };
      </script>
      
      <style scoped>
      .page{
        width: 100%;
        height: 100%;
        background-color: skyblue;
      }
      </style>
      
    展开全文
  • vue页面添加水印

    千次阅读 2020-06-30 09:49:45
    App.vue页面中使用 3.1 先导入warterMark.js 文件 import warterMark from "@/lib/warterMark"; 3.2 在mounted钩子中使用warterMark.set(“水印的文字描述”); mounted: function() { let userId = localStorage....
    1. 效果图在这里插入图片描述
    2. watermark.js

    首先在src目录下lib新建 watermark.js

    'use strict'
    
    let watermark = {}
    
    let setWatermark = (str) => {
        let id = '1.23452384164.123412415'
    
        if (document.getElementById(id) !== null) {
            document.body.removeChild(document.getElementById(id))
        }
    
        let can = document.createElement('canvas')
        can.width = 600
        can.height = 400
    
        let cans = can.getContext('2d')
        cans.rotate(-18 * Math.PI / 180)
        cans.font = '16px Vedana'
        cans.fillStyle = 'rgba(200, 200, 200, 0.30)'
        // cans.fillStyle = 'rgba(235, 187, 222,1)'
        cans.textAlign = 'left'
        cans.textBaseline = 'Middle'
        cans.fillText(str, can.width / 3, can.height / 2)
    
        let div = document.createElement('div')
        div.id = id
        div.style.pointerEvents = 'none'
        div.style.top = '70px'
        div.style.left = '0px'
        div.style.position = 'fixed'
        div.style.zIndex = '100000'
        div.style.width = document.documentElement.clientWidth - 100 + 'px'
        div.style.height = document.documentElement.clientHeight - 100 + 'px'
        div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat'
        document.body.appendChild(div)
        return id
    }
    
    // 该方法只允许调用一次
    watermark.set = (str) => {
        let id = setWatermark(str)
        setInterval(() => {
            if (document.getElementById(id) === null) {
                id = setWatermark(str)
            }
        }, 500)
        window.onresize = () => {
            setWatermark(str)
        }
    }
    
    export default watermark
    
    3. App.vue页面中使用

    3.1 先导入warterMark.js 文件

    import warterMark from "@/lib/warterMark";
    

    3.2 在mounted钩子中使用warterMark.set(“水印的文字描述”);

    mounted: function() {
    	let userId = localStorage.getItem("userId");
    	warterMark.set(userId);
    }
    
    展开全文
  • 需要往哪里添加就给哪里添加ID
  • 问题1:页面出现空白,登录页面都没有显示出来 问题2:IE低版本(11以下)总是报语法错误 问题1出现的原因是js文件包含箭头函数 问题2出现的原因是const变量 Ie低版本无法识别 呈上js文件 'use strict' let ...
  • Vue项目在页面添加水印功能

    万次阅读 多人点赞 2019-03-01 14:42:51
    Vue项目在页面添加水印功能 创建watermark.js文件 let watermark = {} let setWatermark = (str) =&gt; { let id = '1.23452384164.123412416'; if (document.getElementById(id) !== null) { document....
  • vue 项目通过vue指令添加水印

    千次阅读 2019-10-05 09:41:44
    vue项目中通过自定义指令,使用canvas特性生成base64格式的图片文件,并将其设置为背景图片,从而实现页面或组件局部水印效果 1、新建directives.js import Vue from 'vue' Vue.directive('watermark',(el,...
  • 最近遇到个给页面添加水印的需求(之前没弄过也没见过这种效果),然后组长还要求我使用指令的方式实现,做到水印内容、样式基本可配置,说是以后再有这种需求的话就不用再开发了(嗯,道理我都懂,就是有点儿迷茫…...
  • vue项目的页面添加水印,效果如图 index.vue import watermark from "./watermark"; mounted() { watermark.set('我是水印啦'); }, destroyed() { watermark.set(''); //为了清除页面返回时,其它页面也有水印...
  • work02_vue页面打印水印

    2020-10-30 09:48:53
    vue页面打印水印[一] ①. 创建watermark.js文件 /** 水印添加方法 */ let setWatermark = (str1, str2) => { let id = '1.23452384164.123412415' if (document.getElementById(id) !== null) { document....
  • (2)登录页面没有水印【备注:退出登录时,登录页面不会显示水印**】 创建水印 创建watermark.js文件 # 创建水印功能网上一大把,随便搜一下 'use strict' const watermark = {} const setWatermark = (str) =>...
  • 安装水印依赖 npm install watermark-dom 引入组件 import watermark from 'watermark-dom' 或者 var watermarkDom = require("watermark-dom") 在需要使用水印的地方调用 watermark.init({ watermark_txt: "测试...
  • return id } // 该方法只允许调用一次 // 添加水印的方法 watermark.set = (str) => { let id = setWatermark(str); _interval = setInterval(() => { if (document.getElementById(id) === null) { id = ...
  • 项目中需要个打印页面的功能 ,页面中需要水印 代码实现: 1.创建文件夹 watermark.js文件 注:可以自己设置属性 /** 水印添加方法 */ const setWatermark = (str1, str2) => { const id = '1.23452384164....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 524
精华内容 209
关键字:

vue页面添加水印

vue 订阅