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

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • vueプロジェクトは特定の領域に透かしを描くことを実現する
  • Vueは透かし効果を簡単に実現します
  • Vue のグローバル ウォーターマーク実装例
  • Vue は PDF.js を統合して PDF プレビューを実装し、透かしを追加する手順を実行します。
  • クラスを使用して透かしを作成およびクリアする Vue サンプルコード
  • Vue で画像と画像の透かしを隠しテキスト情報とともに使用する方法
  • Vueはページ透かし機能を実装
  • Vueはページに透かし効果を追加する機能を実装します

<<:  MySQLソートにおけるCASE WHENの使用例

>>:  データベースSQL文の最適化

推薦する

MySQL スケジュール データベース バックアップ (フル データベース バックアップ) の実装

目次1. MySQLデータのバックアップ1.1. データをバックアップするためのmysqldumpコ...

Docker イメージのデフォルトの保存場所を変更する方法 (ソリューション)

システムの初期のパーティション分割により、オペレーティング システム内の対応する / パーティション...

Avue でカスタム検索バーを実装し、検索イベントをクリアする実践

目次1. 検索バーの内容をカスタマイズする2. 検索ボタンをカスタマイズする検索バーをカスタマイズし...

Vueはechartsに基づいて3次元の縦棒グラフを実装します

3次元縦棒グラフは、正面、右側、上部の3つの部分で構成されています。描画するときは、正面をグラフィッ...

Promise カプセル化 wx.request メソッド

前回の記事では、Promise を使用して小さなプログラム wx.request をカプセル化する実...

フィールドの文字セットの違いによる MySQL のインデックス失敗の解決策

インデックスとは何ですか?なぜインデックスを作成するのですか?インデックスは、列に特定の値を持つ行を...

CocosCreator 一般的なフレームワーク設計リソース管理

目次Cocos Creator のリソース管理に関する問題リソースの依存関係リソースの使用レスローダ...

Vueプロジェクトがグラフィック検証コードを実装

この記事の例では、グラフィック検証コードを実装するためのVueプロジェクトの具体的なコードを参考まで...

新しい要素を作成する3つの方法のまとめ

1つ目: テキスト/HTML経由var txt1="<h1>テキスト。<...

MySQL 5.7 共通データ型

——「MySQL in Simple Terms (第 2 版)」からのメモ数値型整数型バイト最小最...

Docker コンテナの正常なシャットダウン前にトラップを使用して環境のクリーンアップを実行する

実行中のコンテナが終了したときに、コンテナが完全に終了する前に環境をクリーンアップするなど、いくつか...

VueでJSXを使用する方法

JSXとは何かJSX は Javascript の構文拡張であり、JSX = Javascript ...

MySQLデータベースはsysbenchに基づくOLTPベンチマークテストを実装します

Sysbench は、MySQL データベース ストレージ エンジン InnoDB のディスク I/...

Reactの3つの主要属性における状態の使用の詳細な説明

目次クラスコンポーネント機能コンポーネントsetStateの落とし穴React では多くの場所でデー...

Spark SQL の 4 つの一般的なデータ ソースの詳細な説明

汎用ロード/書き込みメソッドオプションを手動で指定するSpark SQL の DataFrame イ...