明日方舟のキャラクターイラストの混乱を解消する

明日方舟のインストールパッケージとアップグレードパッケージを解凍すると、キャラクターのイラストの周りに余分なピクセルがあります。これらのピクセルを分離したグレースケール画像を使用して、アルファチャンネルを持つイラスト画像を作成する必要があります。

Sharp を使用すると、これを簡単に実現できます。このプロセスを完了するために、小さなツールを作成しました（記事の最後にはすべてのイラストがダウンロードできるリポジトリがあります）。

Sharp の実装#

古いバージョンの sharp では、OverlayWith メソッドを使用してグレースケール画像と元の画像を合成してアルファチャンネルを持つ画像を作成できました。しかし、新しいバージョンでは、OverlayWith メソッドは廃止されているため、同様の機能を実現するために以下の方法を使用しています。

Ⅰ. 操作する画像を読み込む#

sharp は Promise オブジェクトを返すため、以下のコードではすべてのコードを async 関数と await で使用します。

(async function () {
    let mask = await sharp("mask.png"); //グレースケール画像を読み込む
    let image = await sharp("origin.png"); //元の画像を読み込む
})()

Ⅱ. グレースケール画像のチャンネル情報を取得する#

グレースケール画像をアルファチャンネルとして合成するためには、元の画像にアルファチャンネルがないこと、グレースケール画像に1 つのチャンネルのみがあることを確認する必要があります。これにより、グレースケール画像をアルファチャンネルとして元の画像に合成することができます。

私たちが行うことは、元の画像のアルファチャンネルを削除し、グレースケール画像の任意のチャンネルのみを保持することです。

(async function () {
    let mask = await sharp("mask.png") //グレースケール画像を読み込む
        .extractChannel("red"); //グレースケール画像の任意のチャンネルは同じですが、ここでは赤チャンネルを抽出します

    let image = await sharp(`origin.png`) //元の画像を読み込む
        .removeAlpha(); //元の画像のアルファチャンネルを削除します
})()

Ⅲ. 2 つの画像を合成する#

(async function () {
    let mask = await sharp("mask.png") //グレースケール画像を読み込む
        .extractChannel("red"); //グレースケール画像の任意のチャンネルは同じですが、ここでは赤チャンネルを抽出します

    let image = await sharp(`origin.png`) //元の画像を読み込む
        .removeAlpha(); //元の画像のアルファチャンネルを削除します

    let maskBuffer = await mask.toBuffer();
    let imageBuffer = await image.toBuffer();
    sharp(imageBuffer) //Buffer形式で元の画像を読み込みます。実際には、この行はimageで代用できますが、私の強迫観念を満たすためにこのように書いています😂
        .joinChannel(maskBuffer) //グレースケール画像の赤チャンネルを元の画像に追加します。先ほど元の画像のアルファチャンネルを削除したため、実際にはアルファチャンネルが再度追加されます
        .toFile(`out.png`) //最終的な画像を出力します
})()