CODEWITHSUNDEEP
javascriptimagebase64jpeg
Vinicius Tavares
Vinicius Tavares

Reputation: 653

How can I strip common JPEG headers to send it as base64 string

I am using LQIP technique to create blurred placeholder images just like Medium does, using low quality and extremely compressed versions of the original ones.

I am already able to send the inlined images and do all the canvas blurring and it is working great. But I want to go a step ahead: Concatenate the never-changing JPEG headers from the image as Facebook does.

I was reading through my source code today and I saw that the beginning of all images are all the same:

data:image/jpg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDADUlKC8oITUvKy88OTU/UIVXUElJUKN1e2GFwarLyL6qurfV8P//1eL/5re6////////////zv//////////////2wBDATk8PFBGUJ1XV53/3Lrc////////////////////////////////////////////////////////////////////wAARCAAPAB4DAREAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAMBAgT/xAAhEAACAQQCAgMAAAAAAAAAAAABAhEAAxIhMUEEEyJRof/EABYBAQEBAAAAAAAAAAAAAAAAAAABAv/EABYRAQEBAAAAAAAAAAAAAAAAAAABEf/aAAwDAQACEQMRAD8Axs7ewwSRluKBoD3SYDCOOaiqhLsmJMc7qod46XCMp11umgY3AyOEM5HsVnGhbzttcYj5Y/fdMKiyCqkFf2rSU2xKOykaiaI//9k=

as this one

data:image/jpg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDADUlKC8oITUvKy88OTU/UIVXUElJUKN1e2GFwarLyL6qurfV8P//1eL/5re6////////////zv//////////////2wBDATk8PFBGUJ1XV53/3Lrc////////////////////////////////////////////////////////////////////wAARCAAOAB4DAREAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAMEAQL/xAAjEAACAgECBgMAAAAAAAAAAAABAgARAyFREiIxMjNhQYKR/8QAFgEBAQEAAAAAAAAAAAAAAAAAAQAC/8QAGBEBAQEBAQAAAAAAAAAAAAAAAAERITH/2gAMAwEAAhEDEQA/AIFZj0qAvDVQk0a9yGtzZWZFWwvDpS7RWFfdfySGHusi9YVpR439MBYhBZwDGr5SQKA+JoOXVEc8p12lV6//2Q==

Notice the repeating pattern at the beginning? How can I just send the raw JPEG data? Would it be too costly for javascript to concatenate it later on? It is just 500 bytes of string to deal with.

Upvotes: 1

Views: 2678

Answers (1)

le_m
le_m

Reputation: 20248

Of course you can, as long as you are in control of your JPEGs headers:

header = "data:image/jpg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDADUlKC8oITUvKy88OTU/UIVXUElJUKN1e2GFwarLyL6qurfV8P//1eL/5re6////////////zv//////////////2wBDATk8PFBGUJ1XV53/3Lrc////////////////////////////////////////////////////////////////////";

var img1 = new Image();
img1.width = 200;
img1.height = 100;
img1.src = header + "wAARCAAOAB4DAREAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAMEAQL/xAAjEAACAgECBgMAAAAAAAAAAAABAgARAyFREiIxMjNhQYKR/8QAFgEBAQEAAAAAAAAAAAAAAAAAAQAC/8QAGBEBAQEBAQAAAAAAAAAAAAAAAAERITH/2gAMAwEAAhEDEQA/AIFZj0qAvDVQk0a9yGtzZWZFWwvDpS7RWFfdfySGHusi9YVpR439MBYhBZwDGr5SQKA+JoOXVEc8p12lV6//2Q=="


var img2 = new Image();
img2.width = 200;
img2.height = 100;
img2.src = header + "wAARCAAPAB4DAREAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAMBAgT/xAAhEAACAQQCAgMAAAAAAAAAAAABAhEAAxIhMUEEEyJRof/EABYBAQEBAAAAAAAAAAAAAAAAAAABAv/EABYRAQEBAAAAAAAAAAAAAAAAAAABEf/aAAwDAQACEQMRAD8Axs7ewwSRluKBoD3SYDCOOaiqhLsmJMc7qod46XCMp11umgY3AyOEM5HsVnGhbzttcYj5Y/fdMKiyCqkFf2rSU2xKOykaiaI//9k=";

document.body.appendChild(img1);
document.body.appendChild(img2);

You could load your image's base64 within a (combined) ajax request to your server. Concatenating strings and assigning data URLs is pretty efficient, especially when you want to load them into a canvas afterwards anyways.

Upvotes: 2

Related Questions