在 JavaScript 中將編碼的 JPEG 圖像轉換為 Uint8Array

Question

我有一個 python 服務器，它通過 websocket 將一幀 RGB 數據發送到我的 JS 腳本。 該幀使用 simplejpeg python package 編碼。 代碼如下所示：

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。

讓 JPEG 解碼在 JS 腳本中工作的最簡單方法是什么？

Answer 1

有一篇優秀的文章“Decoding a PNG Image in JavaScript”回答了字面問題。 這是一個不平凡的答案。 （注：我不是文章作者）

然而

根據您的代碼，您可能並不關心自己實際解碼圖像。 如果您只想顯示它，請查看此 StackOverflow 問題