Vueはカスタム命令を使用してページの下部に透かしを追加します

プロジェクトシナリオ

プロジェクトの背景全体にカスタム透かしを追加します。透かしのテキスト、フォントの色などを変更できます。

実装のアイデア

ここで使用される技術は主にキャンバスです。透かしを実現するプロセスでは、キャンバスの特性が主に使用されます。
キャンバス機能を使用して base64 イメージファイルを生成し、フォントサイズ、色などを設定します。
最後に、それを背景画像として設定し、ページの透かし効果を実現します。

成果を達成する

実装コード

<テンプレート>
  <div class="water-marker">
      <div v-waterMarker="{text:'Carlo vest - All rights reserved',textColor:'rgba(180, 180, 180, 0.4)'}">
        <div class="water-marker-item">テストの問題、テストの問題、テストの問題、テストの問題、テストの問題、テストの問題</div>
      </div>
  </div>
</テンプレート>

<スクリプト>
'../../directive/test/waterMarker' から waterMarker をインポートします。
エクスポートデフォルト{
  ディレクティブ: {
    ウォーターマーカー
  },
  データ（）{
    戻る {
    }
  },
  方法:{
  }
}
</スクリプト>

<スタイル lang="scss">
.ウォーターマーカー{
  高さ: 300px;
  .ウォーターマーカーアイテム{
    行の高さ: 300px;
  }
}
</スタイル>

waterMarker.js ファイルは次のとおりです。

関数 addWaterMarker(str, parentNode, font, textColor) {
  // 透かしテキスト、親要素、フォント、テキストの色 var can = document.createElement('canvas')
  親ノード.appendChild(できる)
  幅 = 200
  高さ = 150
  can.style.display = 'なし'
  var cans = can.getContext('2d')
  缶を回転します((-20 * Math.PI) / 180)
  cans.font = フォント || '16px Microsoft JhengHei'
  cans.fillStyle = textColor || 'rgba(180, 180, 180, 0.3)'
  cans.textAlign = '左'
  cans.textBaseline = '中央'
  cans.fillText(str, can.width / 10, can.height / 2)
  parentNode.style.backgroundImage = 'url(' + can.toDataURL('image/png') + ')'
}

定数ウォーターマーカー = {
  バインド: 関数 (el, バインディング) {
    水マーカーを追加します(binding.value.text、el、binding.value.font、binding.value.textColor)
  },
}

デフォルトの waterMarker をエクスポート

これで、Vue のカスタム命令を使用してページの下部に透かしを追加する方法についての記事は終了です。Vue ページの下部に透かしを追加することに関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: