<tbody id="5vw1z"></tbody>
<rp id="5vw1z"></rp>
  •  

    Vue項目為頁面添加水印效果

    最近在做項目,有這樣要求,需要在指定容器中添加水印,也可不設置容器,如果沒有容器,則添加在整個頁面中,即body,當接到這個需求的時候我第一想的方法就是用canvas來實現,話不多說搞起來。

    我項目效果如下:

    Vue項目為頁面添加水印效果

    實現方法

    首先我們在utils文件中新建一個waterMark.js文件。

    let watermark = {};
    let setWatermark = (text, sourceBody) => {
      let id = 'watermark_fjq_' + parseInt(Math.random() * 100000);
      if (document.getElementById(id) !== null) {
        document.body.removeChild(document.getElementById(id));
      }
      //水印圖片
      let can = document.createElement('canvas');
      can.width = 390; // 單個水印大小
      can.height = 180; // 單個水印大小
      let cans = can.getContext('2d');
      cans.rotate((-20 * Math.PI) / 180);
      cans.font = '14px Vedana';
      cans.fillStyle = 'rgba(200, 200, 200, 0.20)'; //水印顏色
      cans.textAlign = 'left';
      cans.textBaseline = 'Middle';
      cans.fillText(text, can.width / 20, can.height);
      //設置插入div樣式
      let water_div = document.createElement('div');
      water_div.id = id;
      water_div.style.pointerEvents = 'none';
      water_div.style.overflow = 'hidden';
      water_div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat';
      if (sourceBody) {
        sourceBody.style.position = 'relative';
        water_div.style.width = '100%';
        water_div.style.height = '100%';
        water_div.style.position = 'absolute';
        water_div.style.top = '0';
        water_div.style.left = '0';
        sourceBody.appendChild(water_div);
      } else {
        water_div.style.top = '3px';
        water_div.style.left = '200px';
        water_div.style.position = 'fixed';
        water_div.style.zIndex = '9999';
        water_div.style.width = document.documentElement.offsetWidth + 'px';
        water_div.style.height = document.documentElement.offsetHeight + 'px';
        document.body.appendChild(water_div);
      }
      return id;
    };
    
    /**
     *  該方法只允許調用一次
     *  @param:
     *  @text == 水印內容
     *  @sourceBody == 水印添加在哪里,不傳就是body
     * */
    watermark.set = (text, sourceBody) => {
      setTimeout(() => {
        setWatermark(text, sourceBody);
      }, 1000); //延遲加載
    };
    
    export default watermark;
    

    使用方法

    在main.js 中引入 waterMark.js。

    // 引入水印文件地址
    import watermark from '@/utils/waterMark'
    Vue.prototype.$watermark = watermark
    

    如果我們在指定頁面中使用:

    this.$watermark.set(text,dom)
    參數 說明 是否必填
    text 水印內容
    dom 水印容器。若不傳,則全屏水印,若傳,則指定容器。

    比如,在指定容器水?。?/p>

    <template>
      <div class="page">
        <div ref="content"></div>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {};
      },
      mounted(){
        this.$watermark.set("碼云筆記",this.$refs.content)
      },
      beforeDestroy() {
        this.$watermark.set("",this.$refs.content);
      }
    };
    </script>
    

    我這里需要給整個項目頁面添加水印,所以在App.vue文件中引入:

    <template>
      <router-view />
    </template>
    
    <script>
    export default {
      name: 'App',
      data() {
        return {};
      },
      mounted() {
        this.$watermark.set('碼云筆記');
      },
      beforeDestroy() {
        this.$watermark.set('');
      },
    };
    </script>

    結語

    以上就是我在Vue項目為頁面添加水印效果,都是實際項目中使用過的,大家可以直接CV使用,如果大家有更好的方法,歡迎留言交流。

    「點點贊賞,手留余香」

    2

    給作者打賞,鼓勵TA抓緊創作!

    微信微信 支付寶支付寶

    還沒有人贊賞,快來當第一個贊賞的人吧!

    聲明:
    1. 本站所有文章教程及資源素材均來源于網絡與用戶分享或為本站原創,僅限用于學習和研究。
    2. 如果內容損害你的權益請聯系客服QQ:1642748312給予處理。
    碼云筆記 » Vue項目為頁面添加水印效果

    發表回復

    IT互聯網行業相關廣告投放 更專業 更精準

    立即查看 聯系我們
    亚洲 自拍 另类小说综合图区