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 データベースの鉄則 (要約)

推薦する

Nodejs プラグインと使用方法の概要

このチュートリアルの動作環境: Windows 7 システム、nodejs バージョン 12.19....

CentOS7環境でDockerを使ってPHP動作環境を構築する手順を詳しく解説

関連記事: CentOS7でyumを使用してDockerをインストールするDockerを使ってWin...

CentOS8.0 で FTP サーバーをインストールして設定する方法

CentOS8.0-1905 のリリース後、FTP サーバーを CentOS の新しいバージョンに移...

HTMLテーブルの詳細な説明

機能: データ表示、テーブルアプリケーションシナリオ。 <table> テーブル<...

Bootstrapグリッドの垂直および水平配置の詳細な説明

目次1. Bootstrap グリッドレイアウト2. 垂直方向の配置2.1 行タグの垂直方向の配置を...

Ubuntu 18.04 に opencv 3.2.0 をインストールするためのソリューション

opencv.zip をダウンロード依存関係を事前にインストールします。まずダウンロードソースを更新...

Linuxはiptablesを使用して複数のIPからのサーバーへのアクセスを制限します

序文Linux カーネルでは、netfilter は、パケット フィルタリング、ネットワーク アドレ...

js キャンバスはスライダー検証を実現します

この記事の例では、スライダー検証を実装するためのjsキャンバスの具体的なコードを参考までに共有してい...

HTML テーブル マークアップ チュートリアル (39): ヘッダーの明るい境界線の色属性 BORDERCOLORLIGHT

テーブル ヘッダーでは、明るい境界線の色を個別に定義できます。基本的な構文<TH ボーダーカラ...

フロントエンドの HTML 知識ポイントのまとめ (推奨)

1. HTMLの概要htyper テキスト マークアップ言語 ハイパーテキスト マークアップ言語ハ...

Docker構成 Alibaba Cloud Container Serviceの操作

Alibaba Cloud Dockerコンテナサービスの設定Alibaba Cloud Image...

el-select のスタイルを変更する方法の詳細な説明: popper-append-to-body と popper-class

elementUI が提供する el-select コンポーネントのスタイルを変更する方法この問題...

Pycharmとsshリモートアクセスサーバーdockerの詳細なチュートリアル

背景: 一部の実験はサーバー上で完了する必要があります。したがって、リモート サーバー上のコードをロ...

面接では、select...for update がテーブルをロックするのか、それとも行をロックするのか尋ねられました。

目次確認する:例の検証と組み合わせるselect クエリ ステートメントはロックされませんが、sel...

hrefを使用すると、リンクをクリックするだけでページ上の特定の場所にジャンプできます。

ページ内の a タグをクリックした後、ページ内の対応する場所にジャンプするようにします。方法は非常に...