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

问题

If you get JSON data from Instagram's API you will find a media_preview key, the value of which is some Base64-encoded data. It really looks like some very small preview binary data. Maybe compressed.

Take 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"

I could not reverse the code and find out how Instagram uses this data. What should I do to create a preview from this data?

I am not good at understanding minified js, but I think it draws blurred preview for "sensitive content" on a dynamically created canvas.

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

Update: I've noticed that b64decoded data always starts with 00 2A 2A and ends with FF D9.

回答1:

I've debugged a few lines of code and compiled this function for you. media_preview part of data is so small because full jpeg header already available in code as jpegtpl in my example:

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 + '">');

来源：https://stackoverflow.com/questions/49625771/how-to-recreate-the-preview-from-instagrams-media-preview-raw-data

标签

javascript

html5-canvas

instagram

decode