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 のデータ型とスキーマの最適化の詳細な説明

現在、MySQL の最適化について学習しています。この記事では、データ型とスキーマの最適化について紹...

VUE uni-app でよく使用される API についての簡単な説明

目次1. ルーティングとページジャンプ2. インターフェース要約する1. ルーティングとページジャン...

Windows が MySQL サービスを開始できず、エラー 1067 を報告する場合の解決策

突然、MySQLにログインすると、アクセスが拒否されたか、データベースに接続できないと表示されました...

HTML と CSS を書くための 6 つの最も効果的な方法

この記事では、効率を向上させ、時間を節約することを願って、最も効果的な 6 つの方法を紹介します。 ...

CSS スタイルの読み込みの優先順位に関する経験の共有

昨日のプロジェクト開発中に、スタイルの読み込み優先順位に関する問題が発生しました。クラスは定義され、...

MySQL シリーズ データベース設計 3 つのパラダイム チュートリアルの例

目次1. データベース設計の3つのパラダイムに関する知識の説明1. デザインパラダイムとは何ですか?...

マウスを動かしたときにセカンダリメニューバーを実装するために HTML+CSS を使用する例

この記事では、マウスを動かしたときにセカンダリ メニュー バーを実装するために HTML+CSS を...

ElementUI のネストされたテーブルに基づいて複数選択を実装するためのサンプル コード

序文:私は友人のプロジェクトのバグを修正するのを手伝ったのでこれを書きました。この関数を書くのは初め...

WeChatミニプログラムはどのようにしてユーザー情報とユーザーの電話番号を同時に取得するのか

今日ログインページを書いていたとき、個人情報と携帯電話番号を認証する必要がありましたが、ページにボタ...

docker を使用して kafka プロジェクトをデプロイする Centos6 方法の分析

この記事では、Docker を使用して Centos6 に Kafka プロジェクトをデプロイする方...

Webデザインチュートリアル(8):Webページの階層と空間デザイン

<br />前回の記事:Webデザイン講座(7):Webページ制作の効率化1:必要な小言...

Nodejs でタイムドクローラーを実装する完全な例

目次事件の原因Node Scheduleを使用してスケジュールされたタスクを実装する1. node-...

HTML テーブル マークアップ チュートリアル (1): テーブルの作成

<br />これは 123WORDPRESS.COM が提供する一連のチュートリアルです...

IE6 ウェブページ作成リファレンス IE6 デフォルトスタイル

これは実際には IE の公式ドキュメントではありません。他の人が実践を通じて開発した IE6 のデフ...

CSS ですべての子要素を選択し、スタイルを追加する方法

方法:実際のプロジェクトを例に挙げてみましょう。 .lk-ツールバー{ .el-入力{ 幅: 169...