明日方舟人物立繪反混淆

明日方舟安裝包和升級包解壓後得到的立繪周圍有多餘的像素，需要通過分離出來的灰度圖來獲得具有 alpha 通道的立繪圖片。

用 sharp 來實現還是蠻簡單的，就寫了一個小工具來完成這一過程（文章最後倉庫內有全部立繪可供下載）。

Sharp 的實現#

在舊版本的 sharp 中，能夠直接通過 OverlayWith 方法將灰度圖片與原圖片合成來獲得具有 alpha 通道的圖片。但是在新版本中，OverlayWith 方法被廢棄，所以我通過下面這種方法來實現類似的功能。

Ⅰ. 載入需要操作的圖片#

由於 sharp 返回 Promise 對象，下面全部代碼都會使用 async 函數和 await

(async function () {
    let mask = await sharp("mask.png"); //載入灰度圖像
    let image = await sharp("origin.png"); //載入原始圖像
})()

Ⅱ. 獲得灰度圖的通道信息#

想要將灰度圖作為 alpha 通道合併到，需要保證原圖沒有alpha 通道，灰度圖只有一個通道。只有這樣，才能保證灰度圖作為 alpha 通道合併到原圖中。

我們要做的，就是刪除原圖的 alpha 通道，並且只保留灰度圖的任意一個通道。

(async function () {
    let mask = await sharp("mask.png") //載入灰度圖像
        .extractChannel("red"); //提取灰度圖像的任意一個通道都是一
                                //樣的，這裡提取紅色通道

    let image = await sharp(`origin.png`) //載入原始圖像
        .removeAlpha(); //去除原圖的alpha通道
})()

Ⅲ. 將兩張圖合成#

(async function () {
    let mask = await sharp("mask.png") //載入灰度圖像
        .extractChannel("red"); //提取灰度圖像的任意一個通道都
                                //是一樣的，這裡提取紅色通道

    let image = await sharp(`origin.png`) //載入原始圖像
        .removeAlpha(); //去除原圖的alpha通道

    let maskBuffer = await mask.toBuffer();
    let imageBuffer = await image.toBuffer();
    sharp(imageBuffer) //以Buffer的形式載入原始圖像，其
                       //實這行可以用image代替，這麼寫
                       //是為了滿足我的強迫症😂
        .joinChannel(maskBuffer) //將灰度圖像的紅色通道加入到
                                 //原圖中，因為之前刪除了原圖
                                 //的Alpha通道，所以實際上是
                                 //重新添加了Alpha通道
        .toFile(`out.png`) //輸出最終的圖像
})()