{
"title": "明日方舟人物立绘反混淆",
"tags": [
"post",
"技术"
],
"sources": [
"xlog"
],
"external_urls": [
"https://daidr.xlog.app/arknights"
],
"date_published": "2020-01-21T01:45:00.000Z",
"content": "\n\n\n\n> 明日方舟安装包和升级包解包后得到的立绘周围有多余的像素，需要通过分离出来的灰度图来获得具有alpha通道的立绘图片。\n> \n> 用sharp来实现还是蛮简单的，就写了一个小工具来完成这一过程（文章最后仓库内有全部立绘可供下载）。\n\n### Sharp的实现\n\n在老版本的sharp中，能够直接通过OverlayWith方法将灰度图片与原图片合成来获得具有alpha通道的图片。但是在新版本中，OverlayWith方法被废弃，所以我通过下面这种方法来实现类似的功能。\n\n<img width=\"256\" height=\"256\" src=\"ipfs://bafkreidrrya5b6oo3fxatlyfeoodh2fm5w5f4fdjxq2f52q5nux2cjk4ey\">\n\n<img width=\"256\" height=\"256\" src=\"ipfs://bafkreidu62whpuy7f47463wt3tcy63xbd52vi3dztic22uxta7zg2hgicy\">\n\n### Ⅰ. 载入需要操作的图片\n\n由于sharp返回Promise对象，下面全部代码都会使用async函数和await\n\n```js\n(async function () {\n let mask = await sharp(\"mask.png\"); //载入灰度图像\n let image = await sharp(\"origin.png\"); //载入原始图像\n})()\n```\n\n### Ⅱ. 获得灰度图的通道信息\n\n想要将灰度图作为alpha通道合并到，需要保证原图**没有**alpha通道，灰度图**只有一个通道**。只有这样，才能保证灰度图作为alpha通道合并到原图中。\n\n我们要做的，就是**删除原图的alpha通道**，并且**只保留灰度图的任意一个通道**。\n\n```js\n(async function () {\n let mask = await sharp(\"mask.png\") //载入灰度图像\n .extractChannel(\"red\"); //提取灰度图像的任意一个通道都是一\n //样的，这里提取红色通道\n\n let image = await sharp(`origin.png`) //载入原始图像\n .removeAlpha(); //去除原图的alpha通道\n})()\n```\n\n### Ⅲ. 将两张图合成\n\n```js\n(async function () {\n let mask = await sharp(\"mask.png\") //载入灰度图像\n .extractChannel(\"red\"); //提取灰度图像的任意一个通道都\n //是一样的，这里提取红色通道\n\n let image = await sharp(`origin.png`) //载入原始图像\n .removeAlpha(); //去除原图的alpha通道\n\n let maskBuffer = await mask.toBuffer();\n let imageBuffer = await image.toBuffer();\n sharp(imageBuffer) //以Buffer的形式载入原始图像，其\n //实这行可以用image代替，这么写\n //是为了满足我的强迫症😂\n .joinChannel(maskBuffer) //将灰度图像的红色通道加入到\n //原图中，因为之前删除了原图\n //的Alpha通道，所以实际上是\n //重新添加了Alpha通道\n .toFile(`out.png`) //输出最终的图像\n})()\n```\n\n\n",
"attributes": [
{
"value": "arknights",
"trait_type": "xlog_slug"
}
]
}
