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をインストールして接続する方法と注意すべき点

推薦する

Linux リモートログイン実装チュートリアル分析

Linux は一般的にサーバーとして使用され、サーバーは一般的にコンピュータルーム内に置かれます。L...

Docker イメージ管理の一般的な操作コード例

ミラーリングも Docker のコアコンポーネントの 1 つです。ミラーリングはコンテナ操作の基盤で...

TypeScript でオブジェクト キーの値の範囲を制限する方法

TypeScript を使用する場合、TypeScript が提供する型システムを使用してコードのあ...

Vue Element-ui テーブルはツリー構造テーブルを実現します

この記事では、ツリー構造テーブルを実現するためのElement-uiテーブルの具体的なコードを参考ま...

Vue3.0プロジェクトの構築と利用プロセス

目次1. プロジェクト構築2: ディレクトリ構造3: コンポジションAPI 4: 基本的な使い方:最...

フロントエンド開発に必要な共通ツール機能のまとめ

1. 時刻の書式設定とその他の方法moment.jsライブラリファイルの使用をお勧めします2. テン...

Vueは州、都市、地区のカスケード選択を実現します

最近、省、市、地区のカスケード選択効果を実装する必要があります。省、市、地区のデータはすべてローカル...

C# は MySQL コマンドラインのバックアップとリカバリを実装します

MySQL データベースをバックアップするためのツールは多数あります。過去 2 日間で、C# を使用...

Docker Docker の保存場所を変更する コンテナイメージのサイズ制限を変更する操作

これは新しいバージョンではもう不可能なようで、推奨されません。そうでない場合は、ソフト リンクを直接...

Filebeat を使用して Nginx ログを収集する方法

Nginx ログは、ユーザーの住所の場所や行動プロファイルなどを分析するために使用できます。Elas...

MySQL 8.0 のメモリ関連パラメータの概要

理論的には、MySQL によって使用されるメモリ = グローバル共有メモリ + max_connec...

Vue 3 で Vue Router リンクを拡張する方法

序文<router-link> タグは、Vue アプリ内のさまざまなページ間を移動するた...

vue3+electron12+dll 開発のためのクライアント構成の詳細な説明

目次リポジトリソースを変更する起動するvue-devtoolsを置き換える予防ボーダーレスウィンドウ...

フロントエンドとバックエンドを分離した nginx 構成を展開するための完全な手順

序文決まり文句です。ここでは、フロントエンドとバックエンドの分離についての私の理解についてお話ししま...

InnoDB の主な機能 - 挿入キャッシュ、2 度書き込み、適応ハッシュ インデックスの詳細

InnoDB ストレージ エンジンの主な機能には、挿入バッファ、二重書き込み、適応ハッシュインデック...