背景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 をインストールするチュートリアル
目次背景制限の最適化最適化方法1. カバーインデックスを使用する2. サブクエリの最適化3. 遅延連...
一般的に、リストには選択機能があり、単一選択、二重選択、複数選択が非常に一般的です。カスタム ループ...
この記事は、参考のためにMySQL 8.0.17のインストールと設定のグラフィックチュートリアルを記...
トランジションドキュメントアドレスは、フェードインとフェードアウト効果を実現するための背景ポップアッ...
目次概要ファイル記述子同期、非同期、Promise同期書き込み非同期書き込み(推奨)約束の書き方...
今日、研究室のプロジェクトを見ていたとき、私にとって「難しい」問題に遭遇しました。実は、それは私があ...
<br />今は情報爆発の時代であるだけでなく、サービス爆発の時代でもあります。それはす...
序文: Jenkins のマスター スレーブ分散アーキテクチャは、主に、Jenkins に単一ポイン...
他の人から「つまらない」とか「時代遅れ」というフィードバックを受けて、それを変更しようとしたのに、更...
この記事では、MySQL 8.0.11圧縮版のインストールチュートリアルを参考までに紹介します。具体...
MySQL公式サイトのzipファイルのダウンロードリンク https://dev.mysql.co...
目次序文Denoとは何ですか? Node.jsとの比較建築ESモジュール依存関係の管理TypeScr...
以前は MySQL 5.7 を使用していましたが、MySQL にいくつか新しい機能が追加されたため、...
目次1. 使用2. メッセージポップアップウィンドウが繰り返し表示される問題を解決する1. 使用Vu...
問題の再現HTML を使用して編集する場合、特殊記号によってエラーが表示されることが多く、極端な場合...