Node.js を使用して png 画像に透明なピクセルがあるかどうかを判断する方法

Node.js を使用して png 画像に透明なピクセルがあるかどうかを判断する方法

背景

PNG 画像は jpg 画像よりも多くのストレージスペースを占有しますが、PNG 画像の品質は大幅に優れています。画像の品質がそれほど良くなくてもよい場合もありますが、パッケージ サイズを小さくするために、画像を圧縮したり、透明ピクセルのない png 画像を jpg 形式に変換したりするなど、何らかの最適化が必要になります。この記事では主に、Node.js を使用して透明なピクセルのない png 画像を検出し、それを jpg 画像に変換する方法について説明します。

コード

コードに直接

'canvas' から canvas をインポートします。
'fs' から fs をインポートします。

/**
 * PNG画像に透明なピクセルがあるかどうかを判定します*
 * @param {*} pngPath png画像パス * @param {number} [limit=255] 透明ピクセルの制限。デフォルトでは255未満は透明ピクセルとみなされます * @param {boolean} [isToJpg=false] 透明ピクセルがない場合、jpg画像に変換するかどうか * @returns
 */
関数hasOpacity(pngPath, limit = 255, isToJpg = false) {
  // 画像バッファを取得する
  定数バッファ = fs.readFileSync(pngPath);

  // 画像の幅はバッファの17〜20バイト目に格納されます。const width = buffer.readUInt32BE(16);
  // 画像の幅はバッファの21~24バイト目に格納されます。const height = buffer.readUInt32BE(20);

  // キャンバスを作成します。const pngCanvas = canvas.createCanvas(width, height);
  // ブラシを取得します const context = pngCanvas.getContext('2d');
  // 画像を作成します const img = new canvas.Image();
  // 画像を記録する img.src = buffer;
  // ブラシを使用してキャンバスに画像を描画します context.drawImage(img, 0, 0, width, height);

  // png 画像のピクセルデータを取得します。let res = context.getImageData(0, 0, width, height);
  imgData = res.data とします。
  // 各ピクセルは 4 バイトを占めるので、合計でいくつのピクセルがあるかを計算します // [r, g, b, a]
  piexCount = imgData.length / 4 とします。

  // 透明なピクセルが見つかりましたか? let isOpacity = false;

  (i = 0 とします; i < piexCount; i++) {
    // 各ピクセルを走査して透明チャネルを見つけます。let opacity = imgData[i * 4 + 3];
    不透明度 < 制限の場合 {
        // 制限より小さい場合は透明なピクセルが存在するため終了します isOpacity = true;
      壊す;
    }
  }

  // 透明なピクセルがなく、isToJpg が true の場合、画像を jpg 形式に変換します if (!isOpacity && isToJpg) {
    const out = fs.createWriteStream(pngPath.split('.')[0] + '.jpg');
    pngCanvas.createJPEGStream().pipe(out);
    out.on('finish', () => console.log(pngPath, 'jpg への変換に成功しました'));
  }

  // 戻り値 return isOpacity;
}

console.log(hasOpacity('hh.png', 254, true));
console.log(hasOpacity('jj.png'));

原理:

Canvas は、それぞれ赤チャンネル、緑チャンネル、青チャンネル、透明チャンネルを表すピクセル [r、g、b、a] を格納するために 4 バイトを使用します。各バイトは 8 ビットなので、各チャネルのデータは 0 ~ 255 の範囲になります。透明チャネルの場合、255 は完全に不透明、0 は完全に透明を意味します。 Node.js のバッファとキャンバスを使用して PNG 画像をピクセル データに変換し、各透明チャネルを走査することで、PNG 画像に透明ピクセルがあるかどうかを確認します。

疑い?なぜ制限パラメータがあるのですか?

これは、実際のアプリケーションでは、完全に不透明なピクセルのように見える 254 および 253 の透明ピクセルが少量存在する可能性があるため、これらも不透明ピクセルとして扱われるためです。これは、受け入れ可能な制限に従って渡す必要があります。

サンプル写真

透明なピクセルで

透明ピクセルなし

キャンバス

キャンバスの詳細については、www.npmjs.com/package/canvas を参照してください。

要約する

これで、Node.js を使用して png 画像に透明ピクセルがあるかどうかを判断する方法についての記事は終了です。Node.js を使用して png 画像に透明ピクセルがあるかどうかを判断する方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  Ubuntu 18.04 でソースコードから Odoo14 をインストールするチュートリアル

>>:  MySQL データベースの鉄則 (要約)

推薦する

Linux ps および pstree コマンドの知識ポイントのまとめ

Linux の ps コマンドは Process Status の略です。 ps コマンドは、システ...

MySql インデックスはクエリ速度を向上させる一般的な方法のコード例

インデックスを使用してクエリを高速化する1. はじめにWeb 開発には、ビジネス テンプレート、ビジ...

Docker 実行時にユーザーとグループを管理する方法

Docker はプロセスを中核としてシステムリソースを分離する管理ツールです。分離は、オペレーティン...

絵文字と問題解決のためのMySQL/Javaサーバーサポートの詳細な説明

この記事では、絵文字用の MySQL Java サーバーのサポートと問題解決方法について説明します。...

初心者がソースコードからMySQLのデッドロック問題を理解する

夜遅くまで何度も困難なシングルステップデバッグを行った後、ようやく理想的なブレークポイントを見つけま...

Dockerイメージのローカル移行の実装

最近 Docker を勉強しているのですが、よく問題に遭遇します。Docker イメージをダウンロー...

MySQL 8.0.17 のインストールと設定のグラフィックチュートリアル

この記事は、参考のためにMySQL 8.0.17のインストールと設定のグラフィックチュートリアルを記...

レスポンシブデザインについての簡単な説明

1. レスポンシブ デザインとは何ですか?レスポンシブデザインとは、ウェブサイトの開発プロセス中に、...

Vue のライフサイクルとフック関数の詳細な説明と典型的な面接の質問

目次1. Vue ライフサイクル2. フック機能2.1 4つの段階と8つの方法に分かれています。 2...

PHP 開発環境の構築に関する win10 docker-toolsbox チュートリアル

画像をダウンロード docker プル mysql:5.7 docker pull php:7.2-...

TypeScript におけるジェネリックケースの詳細な説明

ジェネリックの定義 // 要件 1: ジェネリックは指定されていないデータ型をサポートできるため、渡...

Docker stopはすべてのコンテナを停止/削除します

この記事では主に、すべてのコンテナを削除する Docker stop/remove を紹介し、皆さん...

DockerでNginxサーバーを作成する方法

動作環境: MAC Docker バージョン: Docker version 17.12.0-ce,...

Docker で複数のアプリケーション サイトをプロキシするために Nginx を使用する方法

序文エージェントの役割は何ですか? - 複数のドメイン名が同じサーバーに解決される- 1つのサーバー...

JavaScript キャンバスでカラフルな太陽のハロー効果を実現

この記事では、カラフルな太陽のハロー効果を実現するためのJavaScriptキャンバスの具体的なコー...