背景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 をインストールするチュートリアル
このチュートリアルの動作環境: Windows 7 システム、nodejs バージョン 12.19....
関連記事: CentOS7でyumを使用してDockerをインストールするDockerを使ってWin...
CentOS8.0-1905 のリリース後、FTP サーバーを CentOS の新しいバージョンに移...
機能: データ表示、テーブルアプリケーションシナリオ。 <table> テーブル<...
目次1. Bootstrap グリッドレイアウト2. 垂直方向の配置2.1 行タグの垂直方向の配置を...
opencv.zip をダウンロード依存関係を事前にインストールします。まずダウンロードソースを更新...
序文Linux カーネルでは、netfilter は、パケット フィルタリング、ネットワーク アドレ...
この記事の例では、スライダー検証を実装するためのjsキャンバスの具体的なコードを参考までに共有してい...
テーブル ヘッダーでは、明るい境界線の色を個別に定義できます。基本的な構文<TH ボーダーカラ...
1. HTMLの概要htyper テキスト マークアップ言語 ハイパーテキスト マークアップ言語ハ...
Alibaba Cloud Dockerコンテナサービスの設定Alibaba Cloud Image...
elementUI が提供する el-select コンポーネントのスタイルを変更する方法この問題...
背景: 一部の実験はサーバー上で完了する必要があります。したがって、リモート サーバー上のコードをロ...
目次確認する:例の検証と組み合わせるselect クエリ ステートメントはロックされませんが、sel...
ページ内の a タグをクリックした後、ページ内の対応する場所にジャンプするようにします。方法は非常に...