JavaScript - 从二进制JPG数据创建图像

Question

JavaScript - 从二进制JPG数据创建图像

javascripthtml5-canvasjpeg

5

自从浏览器知道如何处理JPG文件，有没有办法动态地提供JPG文件的实际二进制数据，并允许它们解码？

我无法像普通图像.src="path.jpg"一样提供文件，因为数据最初是JS中解析的另一个文件的一部分。

此外，我有一些存储alpha的奇怪JPG文件，所以像https://github.com/notmasteryet/jpgjs这样的库无法处理它们。

- user2503048

没有办法让浏览器读取二进制代码，最接近的方法可能是使用Base64编码，现代浏览器可以读取。 - adeneo

为了获取base64字符串，我需要先解码JPG文件，这会回到初始状态。 - user2503048

“奇怪的JPG文件存储alpha”是什么意思？这真的是两个图像文件：jpg +灰度图像表示alpha通道吗？如果是，则（1）分离这两个图像，（2）使用像jpgjs这样的库对它们进行解码，（3）从解码后的jpg创建2个JavaScript Image对象，（4）创建2个画布并将两个图像都绘制到画布上，（5）使用context.getImageData将颜色.jpg中的RGB通道与灰度.jpg中的Alpha掩码组合起来，（6）使用context.putImageData将组合后的像素数据写入画布，（7）使用canvas.toDataURL创建base64图像数据。 - markE

我稍微编辑了上面的jpgjs代码，似乎颜色只是以BGRA而不是YCbCr的形式存储。如果我避免后面的检查（它会看到格式有4个组件，但实际上并没有），我就可以很好地获取这些值。虽然如此，我仍然更喜欢浏览器进行解码，因为它做得更好，但无论如何，感谢您的评论。 - user2503048

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user1693593 · Accepted Answer

您可以使用 Blob 来创建二进制数据的对象，并将其作为图像解码的 URL 传递。假设您已将二进制数据存储为类型化数组，则可以执行以下操作：

var blob = new Blob([myTypedArray], {type: 'application/octet-binary'});
var url = URL.createObjectURL(blob);

现在您可以将该URL作为图像的来源传递：

var img = new Image;
img.onload = function() {
    URL.revokeObjectURL(url);
    ...
};
img.src = url;

请注意，仍需确保您传递的数据是浏览器可处理的有效图像格式。