隐写术应用-从图片还原画板-逐梦个人博客

在前面的文章中，我们介绍了几种信息隐写的方式：

本文我们将借助一个将json数据转换为图片的应用来实践隐写术的具体应用场景：从图片还原画布。

一、背景

我们在开发在线编辑类应用的时候，一般会提供图片导出功能让用户将当前的编辑状态导出为图片，但是图片一旦导出且用户又没有及时保存当前的编辑状态，当用户下次想基于当前的图片继续编辑，只能根据图片重新创建并编辑项目，而利用隐写术我们可以将用户当前的编辑数据隐藏到导出的图片中，当下次隐藏了数据的图片被重新导入时我们可以解析隐藏的数据并还原编辑状态即画板。

当然，并不是任意图片我们都能解析并还原画板，我们能解析的只能是提前写入了数据的图片，整个功能涉及两个步骤：写入数据、解析数据：

二、写入数据到图片

在前面的文章中，我们介绍了可以使用图片像素来隐藏信息，但是并不适用于当前的应用场景，这里我们选用文件数据填充的方式，之前介绍的是将图片填充到图片结束标志的后面不影响图片后期的显示，后来发现将数据写入到图片EOF的前面也不会对图片的显示产生影响，这里以png图片为例来演示，首先我们定义png图片的EOF及要写入数据的开始标志：

const pngEOF = [0, 0, 0, 0, 73, 69, 78, 68, 174, 66, 96, 130];
const jsonST = new TextEncoder().encode('json:');

解析图片的文件数据，并取得图片EOF的索引，新建一个空白数据，依次写入图片去除EOF后的数据、预定义的数据开始标志、待写入的画板数据、图片EOF，生成最终文件并下载，代码如下：

const picData = new Uint8Array(buffer);
const picEndIndex = getTagIndex(pngEOF, picData);
const jsonData = new TextEncoder().encode(JSON.stringify(data));
const targetData = new Uint8Array(picData.length + jsonST.length + jsonData.length);
const rawPicData = picData.slice(0, picEndIndex);
targetData.set(rawPicData, 0);
targetData.set(jsonST, rawPicData.length);
targetData.set(jsonData, rawPicData.length + jsonST.length);
targetData.set(new Uint8Array(pngEOF), rawPicData.length + jsonST.length + jsonData.length);
const blob = new Blob([targetData], { type: 'image/png' });
downloadBlob(blob, 'export.png');

三、解析数据还原画板

有一天用户突然发现之前导出的图片有一个元素的位置不太对需要调整，为了满足用户的二次调整需求，我们需要从图片中提取并还原之前的画板，数据解析主要是找到写入数据的开始标志索引和图片的结束标志索引，并截取两个索引之间的数据，截取出来的数据就是我们需要的画板数据，代码如下：

const buffer = await fileData.arrayBuffer();
const data = new Uint8Array(buffer);
const jsonSTIndex = getTagIndex(jsonST, data);
const picEndIndex = getTagIndex(pngEOF, data);
const jsonData = data.subarray(jsonSTIndex + jsonST.length, picEndIndex);
const json = JSON.parse(new TextDecoder().decode(jsonData));

上面得到的json即为我们的画板描述数据，根据json即可还原画板。

四、结语

本文的难点在于如何使用文件buffer配合Uint8Array和blob来生成文件和提取文件数据，难度虽然不大，但是需要时刻注意索引的起止范围，避免将数据填充到错误的位置，导致生成的图片被破坏或者取得的解析数据不正确。

在线demo：https://demo.deanhan.cn/json2image/

如需下载本文所涉及的源码及素材包，请在关注本站公众号后发送：json2image

系列文章导航：

第1节： js图片隐写-找出图片中隐藏的漂亮小姐姐

第2节： js图片隐写-图片中还能藏文章？？？

第3节： js图片隐写-藏在图片中的小视频

第4节：你不知道的信息隐藏术-零宽字符的应用