背景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. Dockerをインストールする2. influxDBをインストールして設定する3. Gra...
ルート ルーティング コンポーネント (アプリの下のルート ルーティング コンポーネント。子コンポー...
目次1. 問題の発見2. プロセスの詳細情報を表示する3. 解決策4. 大法を再開する1. 問題の発...
Linux chmodコマンドを使用して、ターゲット ファイルにアクセス、読み取り、書き込み、または...
目次1. Cocos Creatorでのオーディオ再生の基本1. 基本2. 一般的な方法2. Coc...
目次ロックの概要ロックの分類データベース操作の粒度データ操作の種類MySQL ロックさまざまなストレ...
目次序文1. エンドポイント2. 接続ハンドラ3. コヨーテ4. コンテナ責任チェーンパターン序文T...
マイクロサービスのイメージは、保存用に Docker リポジトリにアップロードされます。一般的に使用...
1. 永久的な変更、すべてのユーザーに有効# vi /etc/プロファイル//キーボードの[Shi...
最近、Linux に Aphace、mysql、php をインストールするときに多くの問題に遭遇しま...
この記事では、参考までにVueのファイルのアップロードとダウンロードの具体的なコードを紹介します。具...
注: nginxはbrew経由でインストールされますウェブサイトのルートディレクトリ: /opt/h...
成果を達成する実装のアイデアフィルターのコントラストとぼかしを利用して溶ける効果を実現します。親要素...
React は Vue とは異なります。ルートにメタ文字を設定することでルートインターセプションを実...
目次1. JDKをインストールする2. Jenkinsをインストールする3. Jenkinsの設定を...