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のフロントエンドシステムとフロントエンドとバックエンドの分離の詳細な説明

推薦する

テキストの円形スクロールアニメーションを実装するミニプログラム

この記事では、参考までに、テキストループスクロールを実現するアプレットの具体的なコードを例を挙げて紹...

CentOS 7 で yum を使用して MySQL 5.7.20 をインストールする最も簡単な方法

CentOS7 のデフォルトのデータベースは mariadb ですが、mysql を使っている人も多...

Linux 上でプロジェクトをリリースするために Tomcat を展開するプロセスにおけるさまざまな問題と解決策

プロジェクトをプロジェクトサイトのテスト環境にデプロイするJDK1.8トムキャット8.5 Maven...

HTML減量 HTMLタグを合理化してWebページを作成する

HTML4 についてHTML (XHTML ではありません)、MIME タイプは text/html...

Vueはシンプルなスライダー検証を実装する

この記事の例では、Vueスライダー検証の実装を共有しています。コードは次のとおりです。 <テン...

タブバーの切り替え効果を実現するJavaScript

タブバー: 異なるタブをクリックすると異なるコンテンツが表示され、クリックしたタブのスタイルが変更さ...

MySQLで関連テーブルを削除する実用的な方法

MySQL データベースでは、テーブルが互いに関連付けられた後は、それらを任意に削除することはできま...

MySQL でストリーミングクエリを使用してデータ OOM を回避する

目次1. はじめに2. JDBCはストリーミングクエリを実装する3. パフォーマンステスト3.1. ...

圧縮パッケージを使用して Linux 環境に JDK 13 をインストールする方法

JDK とは何ですか?まあ、この質問がわからないのであれば、なぜこれをインストールするのか本当にわか...

MySQLデータを復元する2つの方法

1. はじめに少し前、開発者がテスト環境や本番環境で誤った操作をし、データベースを誤って削除/更新し...

MySql8.0バージョンに接続するMyBatisの設定問題について

mybatis を学習しているときにエラーが発生しました。エラーの内容は次のとおりです。データベース...

MySQL ページングの制限パラメータの簡単な例

Mysqlページングの2つのパラメータ ユーザー制限 1,2 から * を選択 1 は検索する最初の...

シンプルな画像ドラッグ効果を実現する js

この記事では、簡単な画像ドラッグ効果を実現するためのjsの具体的なコードを参考までに紹介します。具体...

Alibaba Cloud ホストが IP を使用して Web サイトにアクセスできない問題の解決策 (セキュリティ グループ ルールを構成することで解決)

Alibaba Cloud ホストを購入したばかりで、その速度を試すのが待ちきれませんでした。しか...

IE ブラウザの HTML ハック タグの概要

コードをコピーコードは次のとおりです。 <!--[if !IE]><!-->...