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

既然浏览器知道如何处理JPG文件，有没有一种方法可以动态地给他们JPG文件的实际二进制数据并允许他们解码

我无法将该文件作为普通映像提供。src=“path.jpg”，因为数据最初是另一个用JS解析的文件的一部分

此外，我还有一些奇怪的JPG文件存储alpha，所以像这样的库无法处理它们。

您可以使用s从二进制数据创建对象，然后将这些数据作为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;

---

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

无法让浏览器读取二进制代码，最接近的可能是base64，现代浏览器将读取它。要获取base64字符串，我需要先对JPG进行解码，然后再返回到开始处。您需要做什么“存储alpha的怪异JPG文件”的意思是？这真的是2个图像文件：JPG+greyscale image代表alpha通道吗？如果是，那么（1）将2个图像分开，（2）使用类似JPGJ的库对其进行解码，（3）从解码的JPG创建2个javascript图像对象，（4）创建2个画布，并将两个图像绘制到画布，（5）使用context.getImageData将color.jpg中的rgb通道与grayscale.jpg中的alpha遮罩组合在一起，（6）使用context.putImageData将组合的像素数据写入画布，（7）使用canvas.toDataURL创建base64图像数据。我稍微编辑了上面的JPGJ，看起来颜色只是存储为BGRA而不是YCbCr。如果我避免后面的检查（看到格式有4个组件，它不喜欢），我可以很好地获得值。我仍然希望浏览器进行解码，因为它更擅长解码，但不管怎样。感谢您的评论。这看起来很好，但遗憾的是，它删除了alpha通道（所有内容都变得不透明）：（alpha不不透明的像素已更改，因此我假设浏览器会将alpha通道预乘，然后将其删除。太糟糕了，因为这既出色又快速（而且比30KB+解码器小得多）@user2503048似乎JPG规范并不正式支持alpha，对吧？因此我不会对这个答案不适用于alpha通道感到惊讶。不过，使用alpha通道的PNG文件可以使用这种技术，因为PNG支持alpha。JPEG不支持alpha通道。