nginxを使用して画像サイズを動的に変換し、サムネイルを生成します。

nginxを使用して画像サイズを動的に変換し、サムネイルを生成します。

Nginx ngx_http_image_filter_module モジュール (nginx バージョン 0.7.54+) を使用すると、JPEG、GIF、PNG、WebP 形式の画像サイズを動的に変換できます。

このモジュールはデフォルトではビルドされないため、--with-http_image_filter_module 構成パラメータを使用して有効にする必要があります。

画像トラフィックが大きくない場合は、このモジュールを使用できます。

このモジュールは libgd ライブラリを使用します。 最新バージョンのライブラリを使用することをお勧めします。

nginx がすでにインストールされている場合にこのモジュールを追加する手順は次のとおりです。

1 インストールの依存関係

yum -y gd-develをインストールします
yum -y libxslt-devel をインストールします
yum -y インストール perl-devel perl-ExtUtils-Embed

2 元のnginxパラメータを表示する

​ nginx -V

出力は次のようになります。

​ nginx バージョン: nginx/1.12.2
引数を設定します:

--with-http_image_filter_module があるかどうかを確認します。ある場合は、インストールされていることを意味します。ない場合は、インストールを続行します。

3 コンパイル

再コンパイルする場合は、元のものと同じバージョンの nginx ソースコードをダウンロードして解凍する必要があります。

--with-http_image_filter_module=dynamic と元のパラメータを追加します (再インストールするために make install コマンドを実行する必要はありません)

./configure --with-http_image_filter_module=dynamic
作る

4 元のnginxをバックアップする

cp -r /usr/local/nginx /usr/local/nginxbak

5 nginxをカバーする

cp objs/nginx /usr/local/nginx/sbin/
mkdir /usr/local/nginx/module
objs/ngx_http_image_filter_module.so を /usr/local/nginx/module/ngx_http_image_filter_module.so にコピーします。

6 設定ファイルを変更する

vim /usr/local/nginx/conf/nginx.conf

モジュールをロードします /usr/local/nginx/module/ngx_http_image_filter_module.so;
場所 ~* /images/(.+)_(\d+)x(\d+)\.(jpg|jpeg|gif|png)$ {
        $w $2 を設定します。
        $h $3 を設定します。
        image_filter のサイズを $w $h に変更します。
        image_filter_buffer 30M; #画像バッファの最大サイズを設定します。サイズが設定値を超えると、サーバーはエラー415を返します。
        image_filter_interlace をオン;
        画像フィルター jpeg 品質 80;
        try_files /$1.$4 /notfound.jpg;
        有効期限は1日です。
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Credentials' 'true';
        alias /home/publisherupload/ ; #root は、/images/ パスにアクセスするときに /User/XX/Desktop/images にアクセスできるようにします。root を alias に置き換えると、/User/XX/Desktop/ にアクセスします。/User/XX/Desktop/ は、ローカル マシン上の絶対パスです。
    }

場所 /画像 {
  alias /home/publisherupload/ ; #root は、/images/ パスにアクセスするときに /User/XX/Desktop/images にアクセスできるようにします。root を alias に置き換えると、/User/XX/Desktop/ にアクセスします。/User/XX/Desktop/ は、ローカル マシン上の絶対パスです。
  autoindex on; #ディレクトリ参照機能を開く}

7 nginx設定を再読み込みする

nginx の sbin ディレクトリに nginx の sbin ディレクトリを作成します。

8 テスト

最終的な画像アクセスアドレスは、元の画像アドレスの後に_width x heightパラメータを追加します。

http://110.87.103.58:12345/images/2021-01/202101250944272_500x400.png

参照する

https://cloud.tencent.com/developer/article/1644466

nginx を使用して画像サイズを動的に変換し、サムネイルを生成する方法についてはこれで終わりです。nginx による画像サイズの動的変換の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Nginx + consul + upsync を使用して動的負荷分散を実現する方法の詳細な説明
  • Nginxにモジュールを動的に追加する方法
  • nginx ip ブラックリストの動的禁止の例
  • Nginx キャッシュ ファイルと動的ファイルの自動バランス設定スクリプト
  • Nginx ダイナミック DNS リバース プロキシの書き方をいくつか詳しく説明します
  • Nginxはインストールされたnginxに動的にモジュールを追加します
  • nginx にアクセスホワイトリストを動的に追加する方法
  • PHP と Nginx で動的な画像切り抜きソリューションを実現

<<:  主キーを追加または変更するMySQL SQL文操作

>>:  Vueのフロントエンドシステムとフロントエンドとバックエンドの分離の詳細な説明

推薦する

ウェブページ制作をマスターするために必要な6つのスキルのまとめ

ウェブデザイナーはジェネラリストであると言わざるを得ません。グラフィックデザイナーは、さまざまな特殊...

プロセスのすべての情報を表示するLinuxメソッドの例

サーバー上にタスク プロセスがあります。 ps -ef | grep task を使用して表示すると...

FirefoxでCookieとお気に入りをインポートおよびエクスポートする方法

Firefox は、多くの拡張機能とプラグインを備えた、よく使用されるブラウザです。IE に比べて多...

CentOS 8 システム FTP サーバーのインストールとパッシブ モードの設定の詳細なチュートリアル

目次1. 基本を理解する2. システム環境を確認する3. ftpコマンドをインストールする[オプショ...

vuex名前空間の使用

目次Vuex は単一の状態ツリーを使用するため、すべてのアプリケーション状態が比較的大きなオブジェク...

MySQL リンクを表示し、異常なリンクを削除する方法

序文:データベースの運用や保守の際には、リンクの総数がいくつあるか、アクティブなリンクがいくつあるか...

CSSは背景画像の画面適応を実現する

ログインページなどのホームページを作成する場合、大きな背景画像を配置する必要があり、さまざまな画面の...

WeChatアプレットにナンバープレート入力機能を実装

目次序文背景大きな推測パターンを見つける構造とスタイルコンポーネントの実装パラメータキーボードの種類...

MySQLオンラインデータベースのデータをクリーンアップする方法

目次01 シナリオ分析02 操作方法03 結果分析01 シナリオ分析今日の午後、開発仲間がオンライン...

Vueはボールのスライディングクロス効果を実現します

この記事の例では、ボールのスライドとクロスの効果を実現するためのVueの具体的なコードを共有していま...

Linuxドライバのプラットフォームバスの詳細説明

目次1. プラットフォームバスの紹介1.1. Linuxドライバの分離と階層化1.1.1. Linu...

MySQL データ定義言語 DDL の基本ステートメント

MySQL DDL ステートメントDDL、DMLとは何ですか。 DDL はデータ定義言語であり、CR...

MySQL/MariaDB ルートパスワードリセットチュートリアル

序文パスワードを忘れることは、よく遭遇する問題です。MySQL または MariaDB データベース...

CSSはラジオをクリックして2つの画像スタイルを切り替えますが、複数のラジオのうち1つだけをチェックできます。

クリックされたボタンには赤い画像スタイルを実装し、選択されていない他のボタンには灰色の画像スタイルを...

Angularの動的コンポーネントの詳細な説明

目次使用シナリオ達成方法1. 動的コンポーネントを配置する場所2. コンポーネントのインスタンスを取...