網頁水印 react

 

最近研究水印 網上搜索到一款 比較好用的組件 

watermark.js是一個給B/S網站系統加一個很淺的水印插件，確保系統的保密性，安全性，降低數據泄密風險。不影響頁面的其他操作，純粹的水印

貼上源碼地址 https://github.com/saucxs/watermark-dom（感謝作者，讓我快速找到一個可以用的組件）

貼出的測試demo地址如下：https://www.mwcxs.top/static/testTool/index.html（頁面如下）

使用方法 如下（參考官網demo）

第一步：npm獲取水印組件包：

npm install watermark-dom

第二步：引入水印模塊：

import watermark from 'watermark-dom'
或者
var watermarkDom = require("watermark-dom")

第三步：在確保頁面DOM加載完畢之後，調用watermark的load方法(手動加載):

   <script>watermark.load({ watermark_txt: "測試水印，1021002301，測試水印，100101010111101" })</script>

貼合本地react webpack 的使用環境

 

第一步：npm獲取水印組件包：

npm install watermark-dom

第二步：引入水印模塊：

import watermark from 'watermark-dom'
或者
var watermarkDom = require("watermark-dom")

第三步：在確保頁面DOM加載完畢之後，調用watermark的load方法(手動加載)，以及一些配置項:

componentDidMount() {
    watermark.load(
        {
            watermark_id: 'wm_div_id',          //水印總體的id
            watermark_prefix: 'mask_div_id',    //小水印的id前綴
            watermark_txt:"測試水印",             //水印的內容
            watermark_x:10,                     //水印起始位置x軸座標
            watermark_y:20,                     //水印起始位置Y軸座標
            watermark_rows:18,                   //水印行數
            watermark_cols:3,                   //水印列數
            watermark_x_space:30,              //水印x軸間隔
            watermark_y_space:30,               //水印y軸間隔
            watermark_font:'微軟雅黑',           //水印字體
            watermark_color:'red',            //水印字體顏色
            watermark_fontsize:'12px',          //水印字體大小
            watermark_alpha:0.15,               //水印透明度，要求設置在大於等於0.005
            watermark_width:80,                //水印寬度
            watermark_height:20,               //水印長度
            watermark_angle:15,                 //水印傾斜度數
            watermark_parent_width:0,      //水印的總體寬度（默認值：body的scrollWidth和clientWidth的較大值）
            watermark_parent_height:0,     //水印的總體高度（默認值：body的scrollHeight和clientHeight的較大值）
            watermark_parent_node:null     //水印插件掛載的父元素element,不輸入則默認掛在body上
        })
  }

以上就是我的分享啦