Reactはページの透かし効果の全プロセスを実現します

Reactはページの透かし効果の全プロセスを実現します

序文

1. cavans ではなく svg を選択する理由は何ですか?

高解像度の画面では、cavans は devicePixelRatio に応じて幅と高さを調整する必要があるため、調整しないとぼやけてしまいます。SVG は、さまざまな解像度をネイティブにサポートするベクター画像であり、ぼやけは発生しません。

1. 使用例

'react' から React をインポートします
'react-dom' から ReactDOM をインポートします。
'./index.css' をインポートします
'./components/WaterMarkContent' から WaterMarkContent をインポートします。
'./App' から App をインポートします

ReactDOM.render() は、
  <React.StrictMode>
    <ウォーターマークコンテンツ>
      <アプリ />
    </ウォーターマークコンテンツ>
  </React.StrictMode>,
  ドキュメント.getElementById('ルート')
)

2. 実施プロセス

  • 透かし画像を作成する
  • 透かし画像をコンテナ全体に広げる
  • 透かしコンポーネント: サブコンポーネントコンテンツスロットをサポート

SVG透かし画像を作成する

  const { text = 'waterMark', fontSize = 16, fillOpacity = '0.2', fillColor = '#000' } = プロパティ
  定数res = `
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 幅="180px" 高さ="180px" ビューボックス="0 0 180 180">
        <text x="-100" y="-30" fill='${fillColor}' transform = "rotate(-35 220 -220)" fill-opacity='${fillOpacity}' font-size='${fontSize}'> ${text}</text>
      </svg>`

上記のコードから、SVG XML文字列を取得し、それをURLリソースに変換することができます。

 const blob = 新しいBlob([res], {
    タイプ: 'image/svg+xml',
  })

 定数 url = URL.createObjectURL(blob)

このようにして、SVGリソースアドレスを取得し、それをdivの背景画像として使用します。

    <div
      スタイル={{
        位置: '絶対'、
        幅: '100%'、
        高さ: '100%'、
        背景画像: `url(${url})`,
        上: 0,
        左: 0,
        zインデックス: 999,
        ポインタイベント: 'none'、//クリックスルー}}
    </div>

この時点で、透かしで覆われた div を簡単に取得できました。次に、コードを統合してコンポーネントにカプセル化します。

3. コンポーネントコード

'react' から React をインポートします
'react' から { ReactNode, useMemo } をインポートします。

タイプ svgPropsType = {
  テキスト?: 文字列
  フォントサイズ?: 数値
  塗りつぶしの不透明度?: 数値
  塗りつぶし色?: 文字列
}
const SvgTextBg = (props: svgPropsType) => {
  const { text = 'waterMark', fontSize = 16, fillOpacity = '0.2', fillColor = '#000' } = プロパティ
  定数res = `
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 幅="180px" 高さ="180px" ビューボックス="0 0 180 180">
        <text x="-100" y="-30" fill='${fillColor}' transform = "rotate(-35 220 -220)" fill-opacity='${fillOpacity}' font-size='${fontSize}'> ${text}</text>
      </svg>`

  const blob = 新しいBlob([res], {
    タイプ: 'image/svg+xml',
  })

  定数 url = URL.createObjectURL(blob)

  戻る (
    <div
      スタイル={{
        位置: '絶対'、
        幅: '100%'、
        高さ: '100%'、
        背景画像: `url(${url})`,
        上: 0,
        左: 0,
        zインデックス: 999,
        ポインタイベント: 'none'、//クリックスルー}}
    </div>
  )
}

タイプ propsType = {
  子供?: ReactNode
} & 部分的<svgPropsType>

const WaterMarkContent = (props: propsType) => {
  const { テキスト、フォントサイズ、塗りつぶし不透明度、塗りつぶし色 } = プロパティ

  定数memoInfo = useMemo(
    () => ({
      文章、
      フォントサイズ、
      塗りつぶしの不透明度、
      塗りつぶし色、
    })、
    [テキスト、フォントサイズ、塗りつぶしの不透明度、塗りつぶしの色]
  )
  戻る (
    <div style={{ position: 'relative', width: '100%', height: ' 100%' }}>
      {props.children}
      <SvgTextBg {...メモ情報} />
    </div>
  )
}

デフォルトの WaterMarkContent をエクスポートする

要約する

これで、React を使用してページの透かし効果を実現する方法についての記事は終了です。React を使用してページの透かし効果を実現する方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

<<:  Elementのメッセージポップアップウィンドウが繰り返しポップアップする問題の解決

>>:  MySQL 8.0.20でNavicatをインストールして接続する方法と注意すべき点

推薦する

JavaScript 履歴オブジェクトの説明

目次1. ルートナビゲーション2. 履歴状態管理API (1)ハッシュチェンジイベント(2)ポップス...

Linux ファイルシステムの説明: ext4 以降

今日は、ext3 や他の以前のファイル システムとの違いを含め、ext4 の歴史について説明します。...

Linux7 ベースの Hadoop のインストールと構成の詳細なグラフィック説明

上記のように材料を準備します(ps: hadoop-3.1.2-srcはhadoop-3.1.2に変...

QQtabBar による CSS 命名仕様 BEM の詳細な紹介

QQtabBar の BEMまず、BEMとはどういう意味でしょうか? BEM は、ブロック、要素、修...

HTML+CSS+JSはナビゲーションバーのスクロールグラデーション効果を実現します

目次まず効果を見てみましょう:成し遂げる:要約:まず効果を見てみましょう: 成し遂げる: 1. ナビ...

不規則な絵の滝の流れ原理の分析と応用

プロジェクトで発生した不規則な絵画壁のレイアウト問題は、次のように分析されます。 1.img dis...

React コンポーネント通信ルーティングパラメータ転送 (react-router-dom)

目次最近Reactを勉強していて、今は仕事でVueを使っています。学習の過程で、両者を比較して理解を...

MySql5.x を MySql8.x にアップグレードする方法と手順

MySQL 5.x と MySQL 8.0.X のいくつかの違いapplication.proper...

Dockerイメージの作成とプロジェクト全体のワンクリックパッケージングとデプロイ

一般的な Dockerfile 命令の紹介命令説明するから新しいイメージが構築される基となるイメージ...

HarborをベースにしたDocker専用倉庫の構築方法

目次1. ハーバーの紹介1. ハーバーが民間倉庫を建設3. 港湾の維持管理4. Harborユーザー...

ウィンドウ環境で VScode を使用して仮想マシン MySQL に接続する方法

1. 仮想マシン側1. MySQLの設定ファイルを見つける:sudo vim /etc/mysql/...

MySQL sql_mode の使用に関する詳細な説明

目次序文sql_mode の説明最も重要なオプションすべてのオプション要約する序文前回の記事「MyS...

MYSQL ローカルインストールと問題解決

序文この記事はかなり詳細で、少し面倒です。他のチュートリアル ドキュメントでは多くの手順が省略されて...

AngularパイプラインPIPEの紹介と使い方

序文PIPE、パイプラインと翻訳されます。 Angular パイプは、HTML コンポーネントで宣言...

MYSQLテーブルの包括的な概要

目次1. テーブルを作成する1.1. テーブルを作成するための基本構文1.1.1. シンプルなテーブ...