フロントエンドにウォーターマークをロードしますか?(ローカルorグローバル)

11380 ワード
vue JavaScript javascript
フロントエンドにウォーターマークをロードしますか?(ローカルorグローバル)整理
グローバルウォーターマーク:watermark.jsB/Sウェブサイトシステムに透かしを付けるプラグインで、システムの秘密保持性、安全性を確保し、データ漏洩リスクを低減する.簡単で使いやすく、マルチプロパティ構成をサポートし、ローカルとnpmパッケージの導入をサポートし、commonjsとes 6の導入をサポートします.グローバルAPIにはinit(),load(),remove()メソッドがある.css 3のpointer-eventsイベント透過属性とopacity透明属性を用い,Shadow DOM(影DOM)構造で透かしコンテンツをカプセル化しbody下にランダムに挿入する
2、透かしカード-使用
2.1パッケージjsファイルのローカル導入
簡単に浅い透かしを付けるだけで、実現しやすいです.jqueryプラグインを導入する必要はありません.watermark.js導入しなければならないコンポーネント
ステップ1:clone後、透かしが必要な関連ページに透かしファイル「watermark.js」を導入します.
script type="text/javascript" src="./watermark.js">

ステップ2:ページDOMのロードが完了したことを確認した後、watermarkのloadメソッド(手動ロード)を呼び出します.
   watermark.load({ watermark_txt: "    ，1021002301，    ，100101010111101" })

注意:透かしを初期化し、loadイベントとresizeイベントを追加するためのinitメソッドを提供します.
   watermark.init({ watermark_txt: "    ，1021002301，    ，100101010111101" })

プラグインの効果アドレス1を使用します.http://www.chengxinsong.cn
2.2 npmパッケージ導入
ステップ1:npm透かしコンポーネントパッケージを取得するには:
npm install watermark-dom

ステップ2:透かしモジュールを導入する:
import watermark from 'watermark-dom'
  
var watermarkDom = require("watermark-dom")

ステップ3:ページDOMのロードが完了したことを確認した後、watermarkのloadメソッド(手動ロード)を呼び出します.
   watermark.load({ watermark_txt: "    ，1021002301，    ，100101010111101" })

注意:(1)透かしを初期化し、loadとresizeイベントを追加するためのinitメソッドを提供します.
   watermark.init({ watermark_txt: "    ，1021002301，    ，100101010111101" })

注意:(2)透かしを除去するためのremove法を提供した
   watermark.remove({ watermark_txt: "    ，1021002301，    ，100101010111101" })

3、透かしカード-testTool(テストツール)
住所の表示:https://www.mwcxs.top/static/testTool/index.html
4、組み込み方法
4.1 watermark.init(setting);
透かしの初期化、loadイベントとresizeイベントの追加
例
watermark.init({
      watermark_txt: "    ，1021002301，    ，100101010111101" });

4.2 watermark.load(setting);
ウォーターマークを手動でロード
例
watermark.load({
      watermark_txt: "    ，1021002301，    ，100101010111101" });

4.3 watermark.remove();
ウォーターマークを手動で削除
例
watermark.remove();

5、各種属性構成の使用をサポートする
watermark_id: 'wm_div_id',          //     id
watermark_prefix: 'mask_div_id',    //    id  
watermark_txt:"    ",             //     
watermark_x:20,                     //      x   
watermark_y:20,                     //      Y   
watermark_rows:0,                   //    
watermark_cols:0,                   //    
watermark_x_space:100,              //  x   
watermark_y_space:50,               //  y   
watermark_font:'    ',           //    
watermark_color:'black',            //      
watermark_fontsize:'18px',          //      
watermark_alpha:0.15,               //     ，         0.005
watermark_width:100,                //    
watermark_height:100,               //    
watermark_angle:15,                 //      
watermark_parent_width:0,      //       （   ：body scrollWidth clientWidth    ）
watermark_parent_height:0,     //       （   ：body scrollHeight clientHeight    ）
watermark_parent_node:null     //          element,        body

上のプロパティは構成をサポートしていますが、どのように使用しますか?
基本山は自分で配置する属性を必要とします:watermark_txt、watermark_color、watermark_fontsize、watermark_alpha、watermark_angle、watermark_width、watermark_heightこの7つの属性は一般的によく使われていますが、その他の属性は一般的に使われているのは少ないです.必要なものは設定して、必要でないものは設定しないで、プラグインの内部にはデフォルト値があります.
例えばloadメソッドのプロパティ構成
 watermark.load({ 
    watermark_txt:"    ，saucxs，    ，songEagle，   ",  //     
    watermark_color:'#5579ee',            //      
    watermark_fontsize:'24px',          //      
    watermark_alpha:0.5,               //     ，         0.005
    watermark_angle:135,                 //      
    watermark_width:200,                //    
    watermark_height:200,               //    
});

そのため、watermark-domのテストツールで、構成する必要がある属性値をデバッグしてからコードに書き込むのが効率的です.
7、ブラウザをサポートする
Chrome,FireFox,Safari,IE 9以上のブラウザ
API詳細はクリックしてください
局所透かし?
vueプロジェクトでは、モジュールに透かしをロードします.最も簡単な結合canvas+vue命令
import Vue from 'vue'
 
// vue      ---   /       
Vue.directive('watermark',(el,binding)=>{
     
    function addWaterMarker(str,parentNode,font,textColor){
     //     ，   ，  ，    
        var can = document.createElement('canvas');
        parentNode.appendChild(can);
        can.width = 150;
        can.height = 100;
        can.style.display = 'none';
        var cans = can.getContext('2d');
        cans.rotate(-20 * Math.PI / 180);
        cans.font = font || "13px Microsoft JhengHei";
        cans.fillStyle = textColor || "rgba(180, 180, 180, 0.2)";
        cans.textAlign = 'left';
        cans.textBaseline = 'Middle';
        cans.fillText(str, can.width / 14, can.height);
        parentNode.style.backgroundImage = "url(" + can.toDataURL("image/png") + ")";
    }
    addWaterMarker(binding.value.text, el, binding.value.font, binding.value.textColor)
})


//   
// v-watermark="{text: '  ', textColor:'red'}"

メールでjsにjsを導入するにはどこが追加する必要がありますか?コマンドを呼び出せばいいです!
JSPスクリプト要素機能(2)
スプリングのDIはどのように操作しますか?