シャープでNode.jsの画像を処理する方法

投稿日: 2022-04-20 2022-10-12
タグ: Custom Images, Development, Node.js

序章

デジタル画像処理は、コンピュータを使用して画像を分析および操作する方法です。このプロセスには、画像の読み取り、画像を変更または強調する方法の適用、および処理された画像の保存が含まれます。ユーザーがアップロードしたコンテンツを処理するアプリケーションが画像を処理するのは一般的です。たとえば、ユーザーが画像をアップロードできるWebアプリケーションを作成している場合、ユーザーは不要な大きな画像をアップロードする可能性があります。これは、アプリケーションの読み込み速度に悪影響を及ぼし、サーバースペースを浪費する可能性があります。画像処理を使用すると、アプリケーションはユーザーがアップロードしたすべての画像のサイズを変更して圧縮できます。これにより、アプリケーションのパフォーマンスが大幅に向上し、サーバーのディスク領域を節約できます。

Node.jsには、 Sharp 、 jimp 、 gmmoduleなどの画像の処理に使用できるライブラリのエコシステムがあります。この記事では、シャープモジュールに焦点を当てます。 Sharpは人気のあるNode.js画像処理ライブラリで、 JPEG 、 PNG 、 GIF 、[ X154X] WebP 、 AVIF 、 SVG 、TIFF。

このチュートリアルでは、シャープを使用して画像を読み取り、そのメタデータを抽出し、サイズを変更し、画像形式を変更し、画像を圧縮します。次に、画像のトリミング、グレースケール、回転、ぼかしを行います。最後に、画像を合成し、画像にテキストを追加します。このチュートリアルを終了すると、Node.jsで画像を処理する方法を十分に理解できるようになります。

前提条件

このチュートリアルを完了するには、次のものが必要です。

Node.jsはローカル開発環境でセットアップされます。 Node.jsをインストールしてローカル開発環境を作成する方法に従って、システムにNode.jsとnpmをインストールする方法を学ぶことができます。
Node.jsプログラムの作成方法と実行方法に関する基本的な知識。 Node.js で最初のプログラムを作成して実行する方法に従って、基本を学ぶことができます。
JavaScriptでの非同期プログラミングの基本的な理解。 JavaScript でのイベントループ、コールバック、プロミス、非同期/待機について理解し、非同期プログラミングを確認してください。

ステップ1—プロジェクトディレクトリの設定と画像のダウンロード

コードの記述を開始する前に、この記事で使用するコードと画像を含むディレクトリを作成する必要があります。

ターミナルを開き、を使用してプロジェクトのディレクトリを作成します mkdir 指図：

mkdir process_images

を使用して、新しく作成されたディレクトリに移動します cd 指図：

cd process_images

作成する package.json を使用してファイル npm init プロジェクトの依存関係を追跡するコマンド：

npm init -y

The -y オプションは教えます npm デフォルトを作成するには package.json ファイル。

次に、インストールします sharp 依存関係として：

npm install sharp

このチュートリアルでは、次の3つの画像を使用します。

次に、を使用してプロジェクトディレクトリの画像をダウンロードします curl 指図。

次のコマンドを使用して、最初のイメージをダウンロードします。これにより、画像が次のようにダウンロードされます sammy.png:

curl -O https://assets.digitalocean.com/how-to-process-images-in-node-js-with-sharp/sammy.png

次に、次のコマンドを使用して2番目のイメージをダウンロードします。これにより、画像が次のようにダウンロードされます underwater.png:

curl -O https://assets.digitalocean.com/how-to-process-images-in-node-js-with-sharp/underwater.png

最後に、次のコマンドを使用して3番目のイメージをダウンロードします。これにより、画像が次のようにダウンロードされます sammy-transparent.png:

curl -O https://assets.digitalocean.com/how-to-process-images-in-node-js-with-sharp/sammy-transparent.png

プロジェクトディレクトリと依存関係を設定すると、画像の処理を開始する準備が整います。

ステップ2—画像の読み取りとメタデータの出力

このセクションでは、画像を読み取り、そのメタデータを抽出するコードを記述します。画像メタデータは、画像に埋め込まれたテキストであり、画像の種類、幅、高さなどの情報が含まれています。

メタデータを抽出するには、最初にシャープモジュールをインポートし、次のインスタンスを作成します。 sharp、および引数として画像パスを渡します。その後、チェーンします metadata() インスタンスへのメソッドを使用してメタデータを抽出し、コンソールにログインします。

これを行うには、作成して開きます readImage.js お好みのテキストエディタでファイルします。このチュートリアルでは、と呼ばれるターミナルテキストエディタを使用します nano:

nano readImage.js

次に、 sharp ファイルの先頭：

process_images / readImage.js

const sharp = require("sharp");

シャープはプロミスベースの画像処理モジュールです。作成するとき sharp たとえば、promiseを返します。あなたはを使用して約束を解決することができます then メソッドを使用するか、 async /awaitを使用します。これはよりクリーンな構文です。

使用するには async/await 構文では、を配置して非同期関数を作成する必要があります async 関数の先頭にあるキーワード。これにより、 await 画像を読み取ったときに返されるpromiseを解決するための関数内のキーワード。

あなたの中で readImage.js ファイル、非同期関数を定義し、 getMetadata()、画像を読み取り、そのメタデータを抽出して、コンソールにログインするには：

process_images / readImage.js

const sharp = require("sharp");

async function getMetadata() {
  const metadata = await sharp("sammy.png").metadata();
  console.log(metadata);
}

getMetadata() 与えられた非同期関数です async 前に定義したキーワード function ラベル。これにより、 await 関数内の構文。 The getMetadata() 関数は画像を読み取り、そのメタデータを含むオブジェクトを返します。

関数本体内で、を呼び出すことによって画像を読み取ります sharp() これは、画像パスを引数として取ります。 sammy.png.

画像パスを取ることは別として、 sharp() Buffer 、 Uint8Array 、または Uint8ClampedArray に保存されている画像データを読み取ることもできます（画像がJPEG、PNG、GIF、WebP、AVIF、SVG、またはTIFFの場合）。

今、あなたが使うとき sharp() 画像を読み取るために、それは作成します sharp 実例。次に、チェーンします metadata() インスタンスへのシャープモジュールのメソッド。このメソッドは、画像メタデータを含むオブジェクトを返します。このオブジェクトは、 metadata 変数を使用してその内容をログに記録します console.log().

これで、プログラムは画像を読み取り、そのメタデータを返すことができます。ただし、実行中にプログラムがエラーをスローすると、クラッシュします。これを回避するには、エラーが発生したときにエラーをキャプチャする必要があります。

これを行うには、コードを getMetadata() try … catch ブロック内の関数：

process_images / readImage.js

const sharp = require("sharp");

async function getMetadata() {
  try {
    const metadata = await sharp("sammy.png").metadata();
    console.log(metadata);
  } catch (error) {
    console.log(`An error occurred during processing: ${error}`);
  }
}

内部 try ブロックすると、画像を読み取り、そのメタデータを抽出してログに記録します。このプロセス中にエラーが発生すると、実行はスキップされます。 catch セクションを作成し、プログラムのクラッシュを防ぐエラーをログに記録します。

最後に、 getMetadata() 強調表示された行を追加して機能します。

process_images / readImage.js


const sharp = require("sharp");

async function getMetadata() {
  try {
    const metadata = await sharp("sammy.png").metadata();
    console.log(metadata);
  } catch (error) {
    console.log(`An error occurred during processing: ${error}`);
  }
}

getMetadata();

次に、ファイルを保存して終了します。入る y ファイルに加えた変更を保存し、を押してファイル名を確認します ENTER また RETURN 鍵。

を使用してファイルを実行します node 指図：

node readImage.js

次のような出力が表示されます。

Output{
  format: 'png',
  width: 750,
  height: 483,
  space: 'srgb',
  channels: 3,
  depth: 'uchar',
  density: 72,
  isProgressive: false,
  hasProfile: false,
  hasAlpha: false
}

画像を読み取ってメタデータを抽出したので、画像のサイズを変更し、形式を変更して、圧縮します。

ステップ3—サイズ変更、画像フォーマットの変更、および画像の圧縮

サイズ変更とは、画像から何も切り取らずに画像のサイズを変更するプロセスであり、画像ファイルのサイズに影響します。このセクションでは、画像のサイズを変更し、画像の種類を変更し、画像を圧縮します。画像圧縮は、品質を損なうことなく画像ファイルのサイズを縮小するプロセスです。

まず、チェーンします resize() からの方法 sharp インスタンスを使用して画像のサイズを変更し、プロジェクトディレクトリに保存します。次に、チェーンします format() サイズ変更された画像のフォーマットを変更する方法 png に jpeg. さらに、オプションを format() 画像を圧縮してディレクトリに保存する方法。

作成して開く resizeImage.js テキストエディタのファイル：

nano resizeImage.js

次のコードを追加して、画像のサイズを変更します 150px 幅と 97px 身長：

process_images / resizeImage.js

const sharp = require("sharp");

async function resizeImage() {
  try {
    await sharp("sammy.png")
      .resize({
        width: 150,
        height: 97
      })
      .toFile("sammy-resized.png");
  } catch (error) {
    console.log(error);
  }
}

resizeImage();

The resizeImage() シャープモジュールの機能チェーン resize() 方法 sharp 実例。このメソッドは、オブジェクトを引数として取ります。オブジェクトでは、を使用して必要な画像のサイズを設定します width と height 財産。の設定 width に 150 そしてその height に 97 画像を作成します 150px ワイド、そして 97px 高い。

画像のサイズを変更した後、シャープモジュールをチェーンします toFile() メソッド。引数として画像パスを取ります。通過 sammy-resized.png 引数として、その名前の画像ファイルをプログラムの作業ディレクトリに保存します。

次に、ファイルを保存して終了します。ターミナルでプログラムを実行します。

node resizeImage.js

出力は表示されませんが、名前で作成された新しい画像ファイルが表示されます。 sammy-resized.png プロジェクトディレクトリにあります。

ローカルマシンでイメージを開きます。サミーの画像が表示されるはずです 150px 広くて 97px 高い：

画像のサイズを変更できるようになったので、次に、サイズ変更された画像形式を png に jpeg、イメージを圧縮して、作業ディレクトリに保存します。そのためには、 toFormat() メソッド、後にチェーンします resize() 方法。

強調表示されたコードを追加して、画像形式を次のように変更します jpeg そしてそれを圧縮します：

process_images / resizeImage.js

const sharp = require("sharp");

async function resizeImage() {
  try {
    await sharp("sammy.png")
      .resize({
        width: 150,
        height: 97
      })
      .toFormat("jpeg", { mozjpeg: true })
      .toFile("sammy-resized-compressed.jpeg");
  } catch (error) {
    console.log(error);
  }
}

resizeImage();

以内 resizeImage() 関数、あなたは使用します toFormat() 画像フォーマットを変更して圧縮するシャープモジュールの方法。の最初の引数 toFormat() methodは、画像を変換する画像形式を含む文字列です。 2番目の引数は、画像を拡張および圧縮する出力オプションを含むオプションのオブジェクトです。

画像を圧縮するには、画像を渡します mozjpeg ブール値を保持するプロパティ。に設定すると true、sharpは mozjpeg のデフォルトを使用して、品質を犠牲にすることなく画像を圧縮します。オブジェクトは、より多くのオプションを取ることもできます。詳細については、シャープなドキュメントを参照してください。

注：について toFormat() メソッドの2番目の引数である各画像形式は、異なるプロパティを持つオブジェクトを取ります。例えば、 mozjpeg プロパティはでのみ受け入れられます JPEG 画像。

ただし、他の画像形式には、次のような同等のオプションがあります quality, compression、と lossless. 圧縮する画像形式で使用できるオプションの種類については、必ずドキュメントを参照してください。

次に、あなたは合格します toFile() 別のファイル名を使用して、圧縮された画像を次のように保存します sammy-resized-compressed.jpeg.

次に、ファイルを保存して終了し、次のコマンドを使用してコードを実行します。

node resizeImage.js

出力は表示されませんが、画像ファイルが表示されます sammy-resized-compressed.jpeg プロジェクトディレクトリに保存されます。

ローカルマシンでイメージを開くと、次のイメージが表示されます。

画像が圧縮されたら、ファイルサイズをチェックして、圧縮が成功したことを確認します。ターミナルで、 du ファイルサイズを確認するコマンド sammy.png:

du -h sammy.png

-h オプションは、キロバイト、メガバイトなどのファイルサイズを示す人間が読める形式の出力を生成します。

コマンドを実行すると、次のような出力が表示されます。

Output120K    sammy.png

出力は、元の画像が120キロバイトであることを示しています。

次に、ファイルサイズを確認します sammy-resized.png:

du -h sammy-resized.png

コマンドを実行すると、次の出力が表示されます。

Output8.0K     sammy-resized.png

sammy-resized.png 120キロバイトから8キロバイト減少します。これは、サイズ変更操作がファイルサイズに影響を与えることを示しています。

次に、ファイルサイズを確認します sammy-resized-compressed.jpeg:

du -h sammy-resized-compressed.jpeg

コマンドを実行すると、次の出力が表示されます。

Output4.0K    sammy-resized-compressed.jpeg

The sammy-resized-compressed.jpeg は8キロバイトから4キロバイト減少し、4キロバイト節約され、圧縮が機能したことを示しています。

画像のサイズを変更し、形式を変更して圧縮したので、画像をトリミングしてグレースケールします。

ステップ4—画像のトリミングとグレースケールへの変換

このステップでは、画像をトリミングしてグレースケールに変換します。トリミングは、画像から不要な領域を削除するプロセスです。を使用します extend() トリミングする方法 sammy.png 画像。その後、チェーンします grayscale() メソッドをトリミングされた画像インスタンスに変換し、それをグレースケールに変換します。

作成して開く cropImage.js テキストエディタで：

nano cropImage.js

あなたの中で cropImage.js ファイルに次のコードを追加して、画像を切り抜きます。

process_images / cropImage.js

const sharp = require("sharp");

async function cropImage() {
  try {
    await sharp("sammy.png")
      .extract({ width: 500, height: 330, left: 120, top: 70  })
      .toFile("sammy-cropped.png");
  } catch (error) {
    console.log(error);
  }
}

cropImage();

The cropImage() functionは、画像を読み取り、トリミングされた画像を返す非同期関数です。以内 try ブロック、 sharp インスタンスは画像を読み取ります。次に、シャープモジュールの extract() インスタンスにチェーンされたメソッドは、次のプロパティを持つオブジェクトを取ります。

width：トリミングする領域の幅。
height：トリミングする領域の高さ。
top：トリミングする領域の垂直位置。
left：トリミングする領域の水平位置。

あなたが設定するとき width に 500 そしてその height に 330、シャープがトリミングしたい画像の上に透明なボックスを作成すると想像してください。ボックスに収まる画像の一部は残り、残りはカットされます。

The top と left プロパティは、ボックスの位置を制御します。設定すると left に 120、ボックスは画像の左端から120pxの位置にあり、設定します top に 70 ボックスを画像の上端から70pxの位置に配置します。

ボックス内に収まる画像の領域が抽出され、に保存されます sammy-cropped.png 別の画像として。

ファイルを保存して終了します。ターミナルでプログラムを実行します。

node cropImage.js

出力は表示されませんが、画像は表示されます sammy-cropped.png プロジェクトディレクトリに保存されます。

ローカルマシンでイメージを開きます。トリミングされた画像が表示されます。

画像をトリミングしたので、画像をグレースケールに変換します。これを行うには、チェーンします grayscale 方法 sharp 実例。強調表示されたコードを追加して、画像をグレースケールに変換します。

process_images / cropImage.js

const sharp = require("sharp");

async function cropImage() {
  try {
    await sharp("sammy.png")
      .extract({ width: 500, height: 330, left: 120, top: 70 })
      .grayscale()
      .toFile("sammy-cropped-grayscale.png");
  } catch (error) {
    console.log(error);
  }
}

cropImage();

The cropImage() 関数は、シャープモジュールのをチェーンすることにより、トリミングされた画像をグレースケールに変換します grayscale() 方法 sharp 実例。次に、画像をプロジェクトディレクトリに次のように保存します。 sammy-cropped-grayscale.png.

プレス CTRL+X ファイルを保存して終了します。

ターミナルでコードを実行します。

node cropImage.js

開ける sammy-cropped-grayscale.png ローカルマシンで。これで、画像がグレースケールで表示されます。

画像をトリミングして抽出したので、画像を回転させてぼかします。

ステップ5—画像の回転とぼかし

このステップでは、を回転させます sammy.png での画像 33 度の角度。また、回転した画像にガウスぼかしを適用します。ガウスぼかしは、ガウス関数を使用して画像をぼかす手法であり、画像のノイズレベルと詳細を低減します。

作成する rotateImage.js テキストエディタのファイル：

nano rotateImage.js

あなたの中で rotateImage.js ファイルの場合、次のコードブロックを記述して、回転する関数を作成します sammy.png の角度に 33 度：

process_images / rotateImage.js

const sharp = require("sharp");

async function rotateImage() {
  try {
    await sharp("sammy.png")
      .rotate(33, { background: { r: 0, g: 0, b: 0, alpha: 0 } })
      .toFile("sammy-rotated.png");
  } catch (error) {
    console.log(error);
  }
}

rotateImage();

The rotateImage() 関数は、画像を読み取り、次の角度に回転した画像を返す非同期関数です。 33 度。関数内で、 rotate() シャープモジュールのメソッドは2つの引数を取ります。最初の引数はの回転角です 33 度。デフォルトでは、シャープは回転した画像の背景を黒くします。黒い背景を削除するには、2番目の引数としてオブジェクトを渡して、背景を透明にします。

オブジェクトには background RGBAカラーモデルを定義するオブジェクトを保持するプロパティ。 RGBAは、赤、緑、青、およびアルファの略です。

r：赤色の強度を制御します。の整数値を受け入れます 0 に 255. 0 色が使用されていないことを意味し、 255 最高で赤です。
g：緑色の強度を制御します。の整数値を受け入れます 0-255. 0 緑色が使用されていないことを意味し、 255 最高で緑色です。
b：の強度を制御します blue. また、間の整数値を受け入れます 0 と 255. 0 青色が使用されていないことを意味し、 255 最高で青です。
alpha：によって定義される色の不透明度を制御します r, g、と b プロパティ。 0 また 0.0 色を透明にし、 1 また 1.1 色を不透明にします。

のために alpha プロパティを機能させるには、次の値を定義および設定する必要があります r, g、と b. の設定 r, g、と b の値 0 黒色を作成します。透明な背景を作成するには、最初に色を定義する必要があり、次に設定できます alpha に 0 それを透明にするために。

次に、ファイルを保存して終了します。ターミナルでスクリプトを実行します。

node rotateImage.js

の存在を確認してください sammy-rotated.png プロジェクトディレクトリにあります。ローカルマシンで開きます。

画像が次の角度に回転しているのが見えるはずです。 33 度：

次に、回転した画像をぼかします。あなたはそれを連鎖させることによって達成するでしょう blur() 方法 sharp 実例。

画像をぼかすには、以下の強調表示されたコードを入力してください。

process_images / rotateImage.js

const sharp = require("sharp");

async function rotateImage() {
  try {
    await sharp("sammy.png")
      .rotate(33, { background: { r: 0, g: 0, b: 0, alpha: 0 } })
      .blur(4)
      .toFile("sammy-rotated-blurred.png");
  } catch (error) {
    console.log(error);
  }
}

rotateImage();

The rotateImage() 関数は画像を読み取り、回転させ、画像にガウスぼかしを適用します。シャープモジュールを使用して画像にガウスぼかしを適用します blur() 方法。このメソッドは、シグマ値を含む単一の引数を受け入れます。 0.3 と 1000. それを渡す 4 シグマ値がのガウスぼかしを適用します 4. 画像がぼやけた後、ぼやけた画像を保存するためのパスを定義します。

スクリプトは、回転した画像をシグマ値でぼかします。 4. ファイルを保存して終了し、ターミナルでスクリプトを実行します。

node rotateImage.js

スクリプトを実行した後、 sammy-rotated-blurred.png ローカルマシン上のファイル。これで、回転した画像がぼやけて表示されます。

画像を回転させてぼかしたので、別の画像の上に合成します。

ステップ6—を使用して画像を合成する `composite()`

画像合成は、2つ以上の別々の画像を組み合わせて1つの画像を作成するプロセスです。これは、さまざまな写真から最高の要素を取り入れた効果を作成するために行われます。もう1つの一般的な使用例は、画像にロゴを透かしすることです。

このセクションでは、合成します sammy-transparent.png オーバー underwater.png. これにより、サミーが海の奥深くを泳いでいるような錯覚が生じます。画像を合成するには、 composite() 方法 sharp 実例。

ファイルを作成して開きます compositeImage.js テキストエディタで：

nano compositeImages.js

次に、次のコードを追加して、2つの画像を合成する関数を作成します。 compositeImages.js ファイル：

process_images / composeImages.js

const sharp = require("sharp");

async function compositeImages() {
  try {
    await sharp("underwater.png")
      .composite([
        {
          input: "sammy-transparent.png",
          top: 50,
          left: 50,
        },
      ])
      .toFile("sammy-underwater.png");
  } catch (error) {
    console.log(error);
  }
}

compositeImages()

The compositeImages() 関数は underwater.png 最初の画像。次に、チェーンします composite() 引数として配列をとるsharpモジュールのメソッド。配列には、を読み取る単一のオブジェクトが含まれています sammy-transparent.png 画像。オブジェクトには次のプロパティがあります。

input：処理された画像の上に合成したい画像のパスを取ります。また、 Buffer 、 Uint8Array 、またはUint8ClampedArrayを入力として受け入れます。
top：合成する画像の垂直位置を制御します。設定 top に 50 オフセット sammy-transparent.png の上端から50pxの画像 underwater.png 画像。
left：合成する画像の水平位置を制御します。設定 left に 50 オフセット sammy-transparent.png の左端から50px underwater.png 画像。

The composite() この方法では、処理された画像と同じサイズ以下の画像が必要です。

何を視覚化するには composite() メソッドが実行しているのは、画像のスタックを作成するようなものだと考えてください。 The sammy-transparent.png 画像は上に配置されます underwater.png 画像：

The top と left 値は sammy-transparent.png に関連する画像 underwater.png 画像。

スクリプトを保存してファイルを終了します。スクリプトを実行して、画像コンポジションを作成します。

node compositeImages.js

開ける sammy-underwater.png ローカルマシンで。これで、 sammy-transparent.png 上に合成 underwater.png 画像：

これで、 composite() 方法。次のステップでは、 composite() 画像にテキストを追加するメソッド。

ステップ7—画像にテキストを追加する

このステップでは、画像にテキストを書き込みます。執筆時点では、sharpには画像にテキストを追加するネイティブな方法がありません。テキストを追加するには、まず、 Scalable Vector Graphics（SVG）を使用してテキストを描画するコードを記述します。 SVG画像を作成したら、画像を合成するコードを記述します。 sammy.png を使用した画像 composite 方法。

SVGは、Web用のベクターグラフィックを作成するためのXMLベースのマークアップ言語です。テキストや円や三角形などの形を描いたり、イラストやロゴなどの複雑な形を描いたりすることができます。複雑な形状は、SVGコードを生成するInkscapeのようなグラフィックツールを使用して作成されます。 SVGシェイプは、品質を損なうことなく、任意のサイズにレンダリングおよびスケーリングできます。

を作成して開きます addTextOnImage.js テキストエディタでファイルします。

nano addTextOnImage.js

あなたの中で addTextOnImage.js ファイルに次のコードを追加して、SVGコンテナを作成します。

process_images / addTextOnImage.js

const sharp = require("sharp");

async function addTextOnImage() {
  try {
    const width = 750;
    const height = 483;
    const text = "Sammy the Shark";

    const svgImage = `
    <svg width="${width}" height="${height}">
    </svg>
    `;
  } catch (error) {
    console.log(error);
  }
}

addTextOnImage();

The addTextOnImage() 関数は4つの変数を定義します。 width, height, text、と svgImage. width 整数を保持します 750、と height 整数を保持します 483. text 文字列を保持します Sammy the Shark. これは、SVGを使用して描画するテキストです。

The svgImage 変数は svg エレメント。 The svg 要素には2つの属性があります。 width と height それは width と height 以前に定義した変数。 The svg elementは、指定された幅と高さに応じて透明なコンテナを作成します。

あなたは svg 要素a width の 750 と height の 483 SVG画像がと同じサイズになるように sammy.png. これは、テキストが中央に表示されるようにするのに役立ちます sammy.png 画像。

次に、テキストグラフィックを描画します。強調表示されたコードを追加して描画します Sammy the Shark SVGコンテナ：

process_images / addTextOnImage.js

async function addTextOnImage() {
    ...
    const svg = `
    <svg width="${width}" height="${height}">
    <text x="50%" y="50%" text-anchor="middle" class="title">${text}</text>
    </svg>
    `;
  ....
}

SVG text 要素には4つの属性があります。 x, y, text-anchor、と class. x と y SVGコンテナに描画するテキストの位置を定義します。 The x 属性はテキストを水平に配置し、 y 属性はテキストを垂直に配置します。

設定 x に 50% コンテナの中央のx軸にテキストを描画し、設定します y に 50% SVG画像のy軸の中央にテキストを配置します。

The text-anchor テキストを水平方向に揃えます。設定 text-anchor に middle 中央のテキストを x 指定した座標。

class でクラス名を定義します text エレメント。クラス名を使用して、CSSスタイルをに適用します text エレメント。

${text} 文字列を補間します Sammy the Shark に保存 text 変数。これは、SVG画像に描画されるテキストです。

次に、強調表示されたコードを追加して、CSSを使用してテキストのスタイルを設定します。

process_images / addTextOnImage.js

    const svg = `
    <svg width="${width}" height="${height}">
      <style>
      .title { fill: #001; font-size: 70px; font-weight: bold;}
      </style>
      <text x="50%" y="50%" text-anchor="middle" class="title">${text}</text>
    </svg>
    `;

このコードでは、 fill テキストの色を黒に変更し、 font-size フォントサイズを変更し、 font-weight フォントの太さを変更します。

この時点で、テキストを描画するために必要なコードを記述しました。 Sammy the Shark SVGで。次に、SVG画像をとして保存します png SVGがテキストをどのように描画しているかを確認できるようにシャープで表示します。それが完了したら、SVG画像を次のように合成します sammy.png.

ハイライトされたコードを追加して、SVG画像を png シャープで：

process_images / addTextOnImage.js

    ....
    const svgImage = `
    <svg width="${width}" height="${height}">
    ...
    </svg>
    `;
    const svgBuffer = Buffer.from(svgImage);
    const image = await sharp(svgBuffer).toFile("svg-image.png");
  } catch (error) {
    console.log(error);
  }
}

addTextOnImage();

Buffer.from() SVGイメージからBufferオブジェクトを作成します。バッファは、バイナリデータを格納するメモリ内の一時的なスペースです。

バッファオブジェクトを作成した後、 sharp バッファオブジェクトを入力として持つインスタンス。画像パスに加えて、sharpは buffer 、 Uint9Array 、またはUint8ClampedArrayも受け入れます。

最後に、SVGイメージをプロジェクトディレクトリに次のように保存します svg-image.png.

完全なコードは次のとおりです。

process_images / addTextOnImage.js

const sharp = require("sharp");

async function addTextOnImage() {
  try {
    const width = 750;
    const height = 483;
    const text = "Sammy the Shark";

    const svgImage = `
    <svg width="${width}" height="${height}">
      <style>
      .title { fill: #001; font-size: 70px; font-weight: bold;}
      </style>
      <text x="50%" y="50%" text-anchor="middle" class="title">${text}</text>
    </svg>
    `;
    const svgBuffer = Buffer.from(svgImage);
    const image = await sharp(svgBuffer).toFile("svg-image.png");
  } catch (error) {
    console.log(error);
  }
}

addTextOnImage()

ファイルを保存して終了し、次のコマンドを使用してスクリプトを実行します。

node addTextOnImage.js

注：オプション2を使用してNode.jsをインストールした場合— NodeSource PPAまたはオプション3を使用してAptでNode.jsをインストールする—ノードバージョンマネージャーを使用してノードをインストールするそしてエラーを取得する fontconfig error: cannot load default config file: no such file: (null)、インストール fontconfig フォント構成ファイルを生成します。

サーバーのパッケージインデックスを更新し、その後、 apt install インストールする fontconfig.

sudo apt update
sudo apt install fontconfig

開ける svg-image.png ローカルマシンで。これでテキストが表示されます Sammy the Shark 透明な背景でレンダリング：

SVGコードがテキストを描画することを確認したので、テキストグラフィックを合成します。 sammy.png.

次の強調表示されたコードを追加して、SVGテキストグラフィックス画像を sammy.png 画像。

process_images / addTextOnImage.js

const sharp = require("sharp");

async function addTextOnImage() {
  try {
    const width = 750;
    const height = 483;
    const text = "Sammy the Shark";

    const svgImage = `
    <svg width="${width}" height="${height}">
      <style>
      .title { fill: #001; font-size: 70px; font-weight: bold;}
      </style>
      <text x="50%" y="50%" text-anchor="middle" class="title">${text}</text>
    </svg>
    `;
    const svgBuffer = Buffer.from(svgImage);
    const image = await sharp("sammy.png")
      .composite([
        {
          input: svgBuffer,
          top: 0,
          left: 0,
        },
      ])
      .toFile("sammy-text-overlay.png");
  } catch (error) {
    console.log(error);
  }
}

addTextOnImage();

The composite() メソッドはSVG画像をから読み取ります svgBuffer 変数、およびそれを配置します 0 上からのピクセル、および 0 の左端からのピクセル sammy.png. 次に、合成画像を次のように保存します sammy-text-overlay.png.

ファイルを保存して閉じてから、次のコマンドを使用してプログラムを実行します。

node addTextOnImage.js

開ける sammy-text-overlay.png ローカルマシンで。画像の上にテキストが追加されているはずです。

これで、 composite() SVGで作成されたテキストを別の画像に追加するメソッド。

結論

この記事では、シャープなメソッドを使用してNode.jsで画像を処理する方法を学びました。まず、画像を読み取るためのインスタンスを作成し、 metadata() 画像メタデータを抽出するメソッド。次に、 resize() 画像のサイズを変更するメソッド。その後、あなたは format() 画像の種類を変更し、画像を圧縮する方法。次に、さまざまなシャープな方法を使用して、画像のトリミング、グレースケール、回転、およびぼかしを行いました。最後に、 composite() 画像を合成し、画像にテキストを追加するメソッド。

追加のシャープな方法の詳細については、シャープなドキュメントにアクセスしてください。 Node.jsの学習を継続する場合は、Node.jsシリーズのコーディング方法を参照してください。

getdocs

13036

序章

前提条件

ステップ1—プロジェクトディレクトリの設定と画像のダウンロード

ステップ2—画像の読み取りとメタデータの出力

ステップ3—サイズ変更、画像フォーマットの変更、および画像の圧縮

ステップ4—画像のトリミングとグレースケールへの変換

ステップ5—画像の回転とぼかし

ステップ6—を使用して画像を合成する composite()

ステップ7—画像にテキストを追加する

結論

getdocs

ステップ6—を使用して画像を合成する `composite()`