vueプロジェクトは特定の領域に透かしを描くことを実現する

vueプロジェクトは特定の領域に透かしを描くことを実現する

この記事では、Vueを使用して特定の領域に透かしを描く方法を紹介します。具体的な内容は次のとおりです。

まず、効果を見てみましょう。

実際、原理は非常に単純です。つまり、キャンバスを使用して画像を描画し、div の背景を設定します。ここでは、他の人のアイデアを参考にして、自分のニーズに合わせてプラグインをカプセル化します。プロジェクトで直接使用できます。ここでは、別の領域に透かしを設定できます。

「厳密な使用」
 
定数ウォーターマーク = {}
 
/**
 *
 * @param {設定する透かしの内容} str
 * @param {透かしを設定するコンテナ} コンテナ
 */
const setWatermark = (str, コンテナ) => {
  定数id = '1.23452384164.123412415'
 
  if (コンテナ === 未定義) {
    戻る
  }
 
  // ページに存在するかどうかを確認し、存在する場合は削除します if (document.getElementById(id) !== null) {
    定数子要素 = document.getElementById(id)
    子要素.親ノード.子要素を削除します。
  }
 
  var containerWidth = container.offsetWidth // 親コンテナの幅を取得します。 var containerHeight = container.offsetHeight // 親コンテナの高さを取得します。 container.style.position = 'relative' // レイアウトを相対レイアウトに設定します。 // キャンバス要素を作成します (最初に背景画像を作成します)
  const can = document.createElement('canvas')
  can.width = 390 // 各ブロックの幅を設定します can.height = 200 // 高さ const cans = can.getContext('2d') // キャンバスを取得します cans.rotate(-20 * Math.PI / 180) // 反時計回りに π/9 回転します
  cans.font = '20px Vedana' // フォントを設定 cans.fillStyle = 'rgba(200, 200, 200, 0.20)' // フォントの色を設定 cans.textAlign = 'left' // テキストの配置 cans.textBaseline = 'Middle' // テキストのベースライン cans.fillText(str, 0, 4 * can.height / 5) // テキストを描画 // div 要素を作成 const div = document.createElement('div')
  div.id = id // id を設定
  div.style.pointerEvents = 'none' // すべてのイベントをキャンセル div.style.top = '0px'
  div.style.left = '0px'
  div.style.position = '絶対'
  div.style.zIndex = '100000'
  div.style.width = コンテナ幅 + 'px'
  div.style.height = コンテナの高さ + 'px'
  div.style.background = 'url(' + can.toDataURL('image/png') + ') 左上繰り返し'
  container.appendChild(div) // ページに追加してIDを返す
}
 
// このメソッドは一度だけ呼び出すことができます watermark.set = (str, container) => {
  id = setWatermark(str, コンテナ) とします。
  間隔を設定する(() => {
    document.getElementById(id) が null の場合 {
      id = setWatermark(str, コンテナ)
    }
  }, 500)
  // ページサイズの変更をリッスンする window.onresize = () => {
    setWatermark(文字列、コンテナ)
  }
}
 
デフォルトの透かしをエクスポート

ページ上での使用方法:

プラグインをインポートします:

'@/external/watermark' から Watermark をインポートします

次に、必要な位置に refs="xxx" を設定します。Vue プロジェクトでは、document.getElement で要素を直接取得することはできず、this.$refs.xxx を通じてのみ取得できるためです。

<div ref="directrecordwp" class="wrapper">

次に、マウントされたフック関数に次のように記述します。

// ページの透かしを設定します Watermark.set('College Party and Government Cloud Record Management Platform' + this.name, this.$refs.directrecordwp)

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

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

<<:  MySQLデータベース入門:データベースバックアップ操作の詳細な説明

>>:  MySQLデータベースのマスタースレーブ同期の実際のプロセスの詳細な説明

推薦する

アバターと国旗の統合を実現する1行のCSSコード

今日は建国記念日で、誰もが祖国の誕生日をお祝いしようとしています。毎年この時期になると、WeChat...

innerHTML を理解する

<br />関連記事: innerHTML HTML DOM insertRow() メ...

VueとReactの詳細

目次1. パノラマII. 背景1. 反応: プロフェッショナル2. ビュー: 凡例3. 技術的な思考...

Dockerイメージの作成、アップロード、プル、デプロイを理解するための記事

目次1. 画像1. 鏡とは何ですか? 2. 画像の構成と目的(1) Dockerファイル(2)スクラ...

Linux での MySQL データベースのマスター スレーブ同期レプリケーション構成

Linux での MySQL データベースのマスター/スレーブ同期構成の利点は、この方法をバックアッ...

データベースの水平セグメンテーションを実装するための2つのアイデア

導入インターネット アプリケーションの普及に伴い、膨大なデータの保存とアクセスがシステム設計における...

Dockerイメージが消える問題を解決する

1. 50と93では鏡像が消える [root@h50 /]# df -h ファイルシステムの使用済み...

フレックスレイアウトのスペース間の最後の行の左揃えの問題を解決する方法

まずはコードと効果を見てみましょう↓ <スタイル> 。主要 { アウトライン: 1px ...

この記事では、CSSの2列レイアウトと3列レイアウトの具体的な使い方をまとめます。

序文大規模なフロントエンドの開発に伴い、UI フレームワークが次々と登場し、フロントエンド開発におけ...

4 つの主要な SQL ランキング関数 ROW_NUMBER、RANK、DENSE_RANK、NTILE の使用方法の紹介

1. ROW_NUMBER()定義: ROW_NUMBER() 関数は、select によってクエリ...

MySQL の遅いクエリを見つける方法

序文誰もが日常業務で SQL の最適化を経験したことがあると思います。したがって、最適化の前に、遅い...

Webpackを使用して複数ページのプログラムを構築するための実装手順

webpack を使用してシングルページのプログラムを構築することは非常に一般的ですが、実際の開発で...

html.cssオーバーフローの包括的な理解

html.cssオーバーフローの包括的な理解XML/HTML コードコンテンツをクリップボードにコピ...

Windows で複数の MySQL インスタンスを実行する方法

序文Windows では、各インスタンスに適切なパラメータを使用してコマンド ラインから複数の My...

Tomcatはスレッドプールを使用してリモート同時リクエストを処理します。

Tomcatが同時リクエストを処理する方法を理解することで、スレッドプール、ロック、キュー、および...