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

推薦する

MySQL 最適化チュートリアル: 大規模なページングクエリ

目次背景制限の最適化最適化方法1. カバーインデックスを使用する2. サブクエリの最適化3. 遅延連...

Reactマウスの複数選択機能の設定方法

一般的に、リストには選択機能があり、単一選択、二重選択、複数選択が非常に一般的です。カスタム ループ...

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

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

トランジションコンポーネントのアニメーション効果を使用した Vue サンプルコード

トランジションドキュメントアドレスは、フェードインとフェードアウト効果を実現するための背景ポップアッ...

Nodejs でモジュール fs ファイルシステムを使用する方法

目次概要ファイル記述子同期、非同期、Promise同期書き込み非同期書き込み(推奨)約束​​の書き方...

Mysql テーブルで利用可能な最小 ID 値を照会する方法

今日、研究室のプロジェクトを見ていたとき、私にとって「難しい」問題に遭遇しました。実は、それは私があ...

将来人気が出るであろういくつかのナビゲーション方向

<br />今は情報爆発の時代であるだけでなく、サービス爆発の時代でもあります。それはす...

Linux Jenkins 構成スレーブノード実装プロセス図

序文: Jenkins のマスター スレーブ分散アーキテクチャは、主に、Jenkins に単一ポイン...

面白いウェブサイトをデザインするための方法とテクニック(写真)

他の人から「つまらない」とか「時代遅れ」というフィードバックを受けて、それを変更しようとしたのに、更...

Windows 10 での MySQL 8.0.11 圧縮バージョンのインストール チュートリアル

この記事では、MySQL 8.0.11圧縮版のインストールチュートリアルを参考までに紹介します。具体...

MySQL Community Server 5.7.19 インストール ガイド (詳細)

MySQL公式サイトのzipファイルのダウンロードリンク https://dev.mysql.co...

Node.jsとDenoの比較

目次序文Denoとは何ですか? Node.jsとの比較建築ESモジュール依存関係の管理TypeScr...

Windows での MySQL 8.X インストール チュートリアル

以前は MySQL 5.7 を使用していましたが、MySQL にいくつか新しい機能が追加されたため、...

Elementのメッセージポップアップウィンドウが繰り返しポップアップする問題の解決

目次1. 使用2. メッセージポップアップウィンドウが繰り返し表示される問題を解決する1. 使用Vu...

HTMLで特殊記号を表示する(特殊文字対応表付き)

問題の再現HTML を使用して編集する場合、特殊記号によってエラーが表示されることが多く、極端な場合...