国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

如何用vue封裝一個防用戶刪除的平鋪頁面的水印組件

yagami / 2096人閱讀

摘要:需求為了防止截圖等安全問題,在項目頁面中生成一個平鋪全屏的水印要求水印內容為用戶名,水印節點用戶不能通過開發者工具等刪除效果如上圖在節點下插入水印節點,水印節點覆蓋在頁面最上層但不影響頁面正常操作在通過或者用戶通過開發者工具刪除或修改水印節

需求

為了防止截圖等安全問題,在web項目頁面中生成一個平鋪全屏的水印

要求水印內容為用戶名,水印節點用戶不能通過開發者工具等刪除

效果

如上圖

body節點下插入水印DOM節點,水印節點覆蓋在頁面最上層但不影響頁面正常操作

在通過js或者用戶通過開發者工具刪除或修改水印節點時自動復原

原理

通過canvas畫出節點需生成水印的文字生成base64圖片

生成該水印背景圖的div節點插入到body下,通過jsMutationObserver方法監聽節點變化,再自動重新生成

生成水印DOM節點

// 生成水印DOM節點    
init () {
      let canvas = document.createElement("canvas")
      canvas.id = "canvas"
      canvas.width = "200" // 單個水印的寬高
      canvas.height = "130"
      this.maskDiv = document.createElement("div")
      let ctx = canvas.getContext("2d")
      ctx.font = "normal 18px Microsoft Yahei" // 設置樣式
      ctx.fillStyle = "rgba(112, 113, 114, 0.1)" // 水印字體顏色
      ctx.rotate(30 * Math.PI / 180) // 水印偏轉角度
      ctx.fillText(this.inputText, 30, 20)
      let src = canvas.toDataURL("image/png")
      this.maskDiv.style.position = "fixed"
      this.maskDiv.style.zIndex = "9999"
      this.maskDiv.id = "_waterMark"
      this.maskDiv.style.top = "30px"
      this.maskDiv.style.left = "0"
      this.maskDiv.style.height = "100%"
      this.maskDiv.style.width = "100%"
      this.maskDiv.style.pointerEvents = "none"
      this.maskDiv.style.backgroundImage = "URL(" + src + ")"
      // 水印節點插到body下
      document.body.appendChild(this.maskDiv)
    },

監聽DOM更改

// 監聽更改,更改后執行callback回調函數,會得到一個相關信息的參數對象
    Monitor () {
      let body = document.getElementsByTagName("body")[0]
      let options = {
        childList: true,
        attributes: true,
        characterData: true,
        subtree: true,
        attributeOldValue: true,
        characterDataOldValue: true
      }
      let observer = new MutationObserver(this.callback)
      observer.observe(body, options) // 監聽body節點
    },
使用

直接引入項目任何組件中使用即可

組件prop接收三個參數

  props: {
    // 顯示的水印文本
    inputText: {
      type: String,
      default: "waterMark水印"
    },
    // 是否允許通過js或開發者工具等途徑修改水印DOM節點(水印的id,attribute屬性,節點的刪除)
    // true為允許,默認不允許
    inputAllowDele: {
      type: Boolean,
      default: false
    },
    // 是否在組件銷毀時去除水印節點(前提是允許用戶修改DOM,否則去除后會再次自動生成)
    // true會,默認不會
    inputDestroy: {
      type: Boolean,
      default: false
    }
  }

inputText(String):需要生成的水印文本,默認為"waterMark水印"

inputAllowDele(Boolean):是否需要允許用戶刪除水印DOM節點,true為允許,默認不允許

inputDestroy(Boolean):是否在組件銷毀時去除水印節點,true會,默認不會,(只有在inputAllowDele為ftrue時才能生效)

如果需要修改水印大小,文字,顏色等樣式,可直接進入組件中按注釋修改

小結

工作寫了個相關組件,復用率挺高就封裝了下,沒有經過嚴格測試,可當做參考使用,有需要的朋友歡迎下載源碼使用相關GitHub代碼

當然在瀏覽器端無論怎樣也不能完全防止用戶的的行為,但也能滿足多數需求場景

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/99821.html

相關文章

  • 何用vue打造一個移動端音樂播放器

    摘要:寫在前面沒錯,這就是慕課網上的那個音樂播放器,后臺是某音樂播放器的線上接口扒取,雖然這類項目寫的人很多,但不得不說這還是個少有的適合提升的好項目,做這個項目除了想寫一個比較大并且功能復雜的項目,主要原因是要拿它來應對面試,也確實對我的業務能 寫在前面 沒錯,這就是慕課網上的那個vue音樂播放器,后臺是某音樂播放器的線上接口扒取,雖然這類項目寫的人很多,但不得不說這還是個少有的適合vu...

    lanffy 評論0 收藏0
  • 手摸手教你用canvas實現給圖片添加平鋪水印

    摘要:最近項目中遇到一個需求,需要把一張圖片加上平鋪的水印類似這樣的效果首先想到的是用完成這種功能,因為我之前也沒有接觸過,所以做這個功能的時候,就是一步一步的摸索中學習,過程還是挺的,接下來跟我一步步來實現這個功能以及發現一些的坑吧。 最近項目中遇到一個需求,需要把一張圖片加上平鋪的水印 類似這樣的效果showImg(https://segmentfault.com/img/remote/...

    崔曉明 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<