【问题标题】：Converting an encoded JPEG image to Uint8Array in JavaScript在 JavaScript 中将编码的 JPEG 图像转换为 Uint8Array
【发布时间】：2021-08-30 03:27:58
【问题描述】：

我有一个 python 服务器，它通过 websocket 将一帧 RGB 数据发送到我的 JS 脚本。该帧是使用 simplejpeg python 包编码的。代码如下所示：

jpeg_frame = simplejpeg.encode_jpeg(image=color_frame, quality=85,colorspace='RGB', colorsubsampling='444', fastdct=True)

jpeg_frame 传递给 websocket 并发送到 JS 脚本。

然而，在 JS 方面，我想解压缩图像并将其以 Uint8Array 的形式保存，以便我可以处理数据。不必查看图像。

接收到的数据是ArrayBuffer的形式。

这是我目前所拥有的。

socketio.on('colorFrame',(data)=>{
    var mime = 'image/jpeg';
    var a = new Uint8Array(data);
    var nb = a.length;
    if (nb < 4)
        return null;
    var binary = "";
    for (var i = 0; i < nb; i++)
        binary += String.fromCharCode(a[i]);
    var base64 = window.btoa(binary);
    var image = new Image();
    image.src = 'data:' + mime + ';base64,' + base64;
    
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');

    ctx.drawImage(image,0,0)

    image.onload = function(){
        var image_data = ctx.getImageData(0,0, 960, 540);
        console.log(image_data);
    };
});

到目前为止，我还不知道如何解压缩图像。我不介意有损压缩的不准确性，我只想将图像恢复到原始分辨率并能够将其转换为 Uint8Array。

在 JS 脚本中进行 JPEG 解码的最简单方法是什么？

【问题讨论】：

您可能想使用npmjs.com/package/base64-arraybuffer 而不是滚动自己的解码...
但是，是的，你在正确的轨道上。加载了Image 后，您可以使用画布 2D 上下文对其进行绘制，然后使用getImageData 处理像素。
您还需要附加到 image.onload 事件，因为即使使用数据 uri，图像在触发 onload 之前还没有准备好。
感谢您的建议。我已经更新了答案以包含新的代码行。当我控制台记录图像数据时，所有像素都是 0。

标签： javascript socket.io jpeg

【解决方案1】：

有一篇出色的文章 "Decoding a PNG Image in JavaScript" 回答了字面问题。这是一个不平凡的答案。（注：我不是文章作者）

然而

根据您的代码，您可能并不关心自己实际解码图像。如果你只是想展示，看this StackOverflow question

【讨论】：