如何从 Instagram 的 media_preview 原始数据重新创建预览？

Question

如果您从 Instagram 的 API 获取 JSON 数据，您会发现一个 media_preview 键，其值是一些 Base64 编码的数据。它看起来确实像一些非常小的预览二进制数据。可能压缩了。

取this post for example. It's just a black square and its preview is very small. Look at its JSON： data['graphql']['media_preview'] = "ACoq5miiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAP/Z"

我无法逆向代码并找出 Instagram 如何使用这些数据。我应该如何根据这些数据创建预览？

我不擅长理解缩小的 js，但我认为它在动态创建的 canvas 上为 "sensitive content" 绘制模糊预览。

Here is a post with some sensitive content (medical) as an example

更新： 我注意到 b64 解码数据总是以 00 2A 2A 开始并以 FF D9 结束。

Answer 1

我已经调试了几行代码并为您编译了这个函数。 media_preview 部分数据非常小，因为完整的 jpeg header 已经在代码中可用，在我的示例中为 jpegtpl：

function ig_media_preview(base64data) {
 var jpegtpl = "/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEABsaGikdKUEmJkFCLy8vQkc/Pj4/R0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0cBHSkpNCY0PygoP0c/NT9HR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR//AABEIABQAKgMBIgACEQEDEQH/xAGiAAABBQEBAQEBAQAAAAAAAAAAAQIDBAUGBwgJCgsQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+gEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEQACAQIEBAMEBwUEBAABAncAAQIDEQQFITEGEkFRB2FxEyIygQgUQpGhscEJIzNS8BVictEKFiQ04SXxFxgZGiYnKCkqNTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqCg4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2dri4+Tl5ufo6ery8/T19vf4+fr/2gAMAwEAAhEDEQA/AA==",
  t = atob(base64data),
  p = t.slice(3).split(""),
  o = t.substring(0, 3).split("").map(function(e) {
   return e.charCodeAt(0)
  }),
  c = atob(jpegtpl).split("");
 c[162] = String.fromCharCode(o[1]);
 c[160] = String.fromCharCode(o[2]);
 return base64data ? "data:image/jpeg;base64," + btoa(c.concat(p).join("")) : null
};
      
var data = "ACoq5miiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAP/Z";
var uri = ig_media_preview(data);
document.body.insertAdjacentHTML('beforeend', '<img src="' + uri + '">');

如何从 Instagram 的 media_preview 原始数据重新创建预览？

How to recreate the preview from Instagram's media_preview raw data?

javascript

decode

instagram

html5-canvas