如何剥离常见的 JPEG headers 以将其作为 base64 字符串发送

Question

我正在使用 LQIP technique to create blurred placeholder images just like Medium，使用原始版本的低质量和极度压缩版本。

我已经能够发送内联图像并进行所有 canvas 模糊处理，而且效果很好。但我想更进一步：像 Facebook 那样从图像中连接 never-changing JPEG headers。

今天看了我的源码，发现所有图片的开头都是一样的：

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

像这个

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

注意到开头的重复模式了吗？我怎样才能发送原始 JPEG 数据？ javascript 稍后连接它会不会太昂贵？只需处理 500 字节的字符串。

Answer 1

当然可以，只要您能控制自己的 JPEG 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);

您可以在对服务器的（组合）ajax 请求中加载图像的 base64。连接字符串和分配数据 URL 非常有效，尤其是当您无论如何都想将它们加载到 canvas 中时。

如何剥离常见的 JPEG headers 以将其作为 base64 字符串发送

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

javascript

base64

jpeg

image