この記事では、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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQLデータベース入門:データベースバックアップ操作の詳細な説明
>>: MySQLデータベースのマスタースレーブ同期の実際のプロセスの詳細な説明
今日は建国記念日で、誰もが祖国の誕生日をお祝いしようとしています。毎年この時期になると、WeChat...
<br />関連記事: innerHTML HTML DOM insertRow() メ...
目次1. パノラマII. 背景1. 反応: プロフェッショナル2. ビュー: 凡例3. 技術的な思考...
目次1. 画像1. 鏡とは何ですか? 2. 画像の構成と目的(1) Dockerファイル(2)スクラ...
Linux での MySQL データベースのマスター/スレーブ同期構成の利点は、この方法をバックアッ...
導入インターネット アプリケーションの普及に伴い、膨大なデータの保存とアクセスがシステム設計における...
1. 50と93では鏡像が消える [root@h50 /]# df -h ファイルシステムの使用済み...
まずはコードと効果を見てみましょう↓ <スタイル> 。主要 { アウトライン: 1px ...
序文大規模なフロントエンドの開発に伴い、UI フレームワークが次々と登場し、フロントエンド開発におけ...
1. ROW_NUMBER()定義: ROW_NUMBER() 関数は、select によってクエリ...
序文誰もが日常業務で SQL の最適化を経験したことがあると思います。したがって、最適化の前に、遅い...
webpack を使用してシングルページのプログラムを構築することは非常に一般的ですが、実際の開発で...
html.cssオーバーフローの包括的な理解XML/HTML コードコンテンツをクリップボードにコピ...
序文Windows では、各インスタンスに適切なパラメータを使用してコマンド ラインから複数の My...
Tomcatが同時リクエストを処理する方法を理解することで、スレッドプール、ロック、キュー、および...