在 Chrome 中从 HAR 文件重建 PNG答案

【问题标题】：reconstruct PNG from HAR file in Chrome在 Chrome 中从 HAR 文件重建 PNG
【发布时间】：2015-01-02 03:18:53
【问题描述】：

我正在浏览 HAR 文件，Chrome 使用这些文件来记录浏览会话。它是用WebInspector 制作的。

对于我的会话，我想知道它与图像文件有什么关系。显然它将它们下载为文本...我看到一个 PNG 记录为：

"content": {
            "size": 633,
            "mimeType": "image/png",
            "compression": 0,
            "text": "iVBORw0KGgoAAAANSUhEUgAAABIAAAAQCAMAAAAs2N9uAAAAwFBMVEUAAAD//vn/6qj/8cX/4nv/4Gj/3Fb/2Ub/+/H/+OP/5oz0nnjxg1DthDn9wxf+zA3/ywL+yAn/89LoYkjiUzzeWif+7sj8yWvaQS7wtpj9ylf1uSr/1Tj+zjz+yUn90Ibrdz/9viT+2WL/0yz8v1bTMR7mehLEuVhUruWdsJv1rQjnwStiuOtlx/9Vwv9Jvv9uyv//0Rn/7riEv8o/u/+zuXhZtetnrMs9wf9x0f9SuPib2vnM7f/y+v/4z3h61P9T93Q2AAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAAAEgAAABIAEbJaz4AAADjSURBVBjTLdDtcoIwEEBRDAmB1AYiWlCCLVBE/EgUsRW18v5v1Q26P8/c3ZnEsqwRQjYmDqXUca3neAy/jd+5HwTCHmDkTfA4DKczAcQ+TIcYi0Cm8XxixgNiGC+A4jiRMl0uPg0RQr9AZrDHsyR6kpOHEBVFmi6/TUUkLei8XEFUrdd1DeQU1HdQuQnEdrdX+gBEj9Jv8lIIkZxeRChpkL8RnGcnpVpDDUK5qHZnntQ/Srd7c+so4crhXP0qpfSlA3JtxOHK9Qqgb/e/4ZV2ltWm0O3l/voJ9xE9bn3fd103NP/JehnXpgX3BAAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxMi0wMy0xNFQxNTo0MTo0OS0wNTowMIuGhf0AAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTAtMTItMjJUMTM6NDI6NDctMDY6MDBvXc3SAAAAAElFTkSuQmCC"
          }

我想查看 PNG 文件，所以我输入了 nano test.png 并将文本保存到一个文件中，以 iVBOR 开头...当我用 Chrome 打开图像时，我得到了一张损坏的图片 - 实际上什么也没有。

是否有任何额外的步骤来以这种方式重建 PNG 文件？

根据同一个文件，原来的url是http://i.stack.imgur.com/XDJKz.png，图片应该是

【问题讨论】：

标签： google-chrome png har

【解决方案1】：

text 字符串是图像Base64 编码。如果你把字符串的内容像这样放在一个文本文件中。

text.txt

iVBORw0KGgoAAAANSUhEUgAAABIAAAAQCAMAAAAs2N9uAAAAwFBMVEUAAAD//vn/6qj/8cX/4nv/4Gj/3Fb/2Ub/+/H/+OP/5oz0nnjxg1DthDn9wxf+zA3/ywL+yAn/89LoYkjiUzzeWif+7sj8yWvaQS7wtpj9ylf1uSr/1Tj+zjz+yUn90Ibrdz/9viT+2WL/0yz8v1bTMR7mehLEuVhUruWdsJv1rQjnwStiuOtlx/9Vwv9Jvv9uyv//0Rn/7riEv8o/u/+zuXhZtetnrMs9wf9x0f9SuPib2vnM7f/y+v/4z3h61P9T93Q2AAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAAAEgAAABIAEbJaz4AAADjSURBVBjTLdDtcoIwEEBRDAmB1AYiWlCCLVBE/EgUsRW18v5v1Q26P8/c3ZnEsqwRQjYmDqXUca3neAy/jd+5HwTCHmDkTfA4DKczAcQ+TIcYi0Cm8XxixgNiGC+A4jiRMl0uPg0RQr9AZrDHsyR6kpOHEBVFmi6/TUUkLei8XEFUrdd1DeQU1HdQuQnEdrdX+gBEj9Jv8lIIkZxeRChpkL8RnGcnpVpDDUK5qHZnntQ/Srd7c+so4crhXP0qpfSlA3JtxOHK9Qqgb/e/4ZV2ltWm0O3l/voJ9xE9bn3fd103NP/JehnXpgX3BAAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxMi0wMy0xNFQxNTo0MTo0OS0wNTowMIuGhf0AAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTAtMTItMjJUMTM6NDI6NDctMDY6MDBvXc3SAAAAAElFTkSuQmCC

你可以像这样从命令行解码它。

base64 -D text.txt > decoded.png

解码后的 PNG 与您链接的 PNG 相同。

【讨论】：

【解决方案2】：

text部分是用Base64编码的图像数据。

如果您只是想在浏览器中查看它，而不是使用 Alexander O'Mara 显示的方法将其实际转换为 png 文件，您可以复制 text 并使用 data URI scheme，如下所示：

<html><head><title></title></head>
<body>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAQCAMAAAAs2N9uAAAAwFBMVEUAAAD//vn/6qj/8cX/4nv/4Gj/3Fb/2Ub/+/H/+OP/5oz0nnjxg1DthDn9wxf+zA3/ywL+yAn/89LoYkjiUzzeWif+7sj8yWvaQS7wtpj9ylf1uSr/1Tj+zjz+yUn90Ibrdz/9viT+2WL/0yz8v1bTMR7mehLEuVhUruWdsJv1rQjnwStiuOtlx/9Vwv9Jvv9uyv//0Rn/7riEv8o/u/+zuXhZtetnrMs9wf9x0f9SuPib2vnM7f/y+v/4z3h61P9T93Q2AAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAAAEgAAABIAEbJaz4AAADjSURBVBjTLdDtcoIwEEBRDAmB1AYiWlCCLVBE/EgUsRW18v5v1Q26P8/c3ZnEsqwRQjYmDqXUca3neAy/jd+5HwTCHmDkTfA4DKczAcQ+TIcYi0Cm8XxixgNiGC+A4jiRMl0uPg0RQr9AZrDHsyR6kpOHEBVFmi6/TUUkLei8XEFUrdd1DeQU1HdQuQnEdrdX+gBEj9Jv8lIIkZxeRChpkL8RnGcnpVpDDUK5qHZnntQ/Srd7c+so4crhXP0qpfSlA3JtxOHK9Qqgb/e/4ZV2ltWm0O3l/voJ9xE9bn3fd103NP/JehnXpgX3BAAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxMi0wMy0xNFQxNTo0MTo0OS0wNTowMIuGhf0AAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTAtMTItMjJUMTM6NDI6NDctMDY6MDBvXc3SAAAAAElFTkSuQmCC" alt="">
</body>
</html>

【讨论】：