HTML5 将 png 缓冲区加载到画布中(用于流式传输)

2022-01-17 00:00:00 buffer streaming javascript html html5-canvas

通过 websocket，我以 PNG 格式检索图像的二进制缓冲区(类似的东西).

Through a websocket, I retrieve a binary buffer of an image in a PNG format (something like that).

我想将此PNG缓冲区加载到画布中，然后读取不同的像素以读取未压缩的数据.

I want to load this PNG buffer into a canvas, and then read the different pixels to read the uncompressed data.

我设法做到了，但这很愚蠢:

I managed to do it but it is stupid:

function onBinaryMessage(/*ArrayBuffer*/ input) {
  input = new Uint8Array(input);

  var str = '';
  for (var i = 0; i < input.byteLength; i++)
    str = str + String.fromCharCode(input[i]);

  var image = document.getElementById("image");
  image.src = 'data:image/png;base64,' + btoa(str);

  var c = document.getElementById("canvas");
  var ctx = c.getContext("2d");
  ctx.drawImage(image, 0, 0);
  var imgData = ctx.getImageData(0, 0, image.width, image.height);
  console.log(imgData);
}

我必须将我的二进制文件转换成一个字符串来对这个字符串进行编码64，然后我将我的图像src影响到这个新创建的编码64字符串......浏览器必须重新将此编码的 64 数据转换为我得到的原始 PNG 缓冲区...

I have to convert my binary into a string to encode64 this string, and than I affect my image src to this newly created encoded64 string... The browser have to re-convert this encoded64 data into the original PNG buffer I got...

有没有办法直接设置画布缓冲区?或者有什么方法可以更好地处理流媒体?

Is there any way to directement set the canvas buffer? Or is there any method to better handle streaming?

我想我可以使用 File API 将缓冲区写入临时文件，但创建文件会花费很多:(

I think I could use the File API to write the buffer into a temporary file but it would cost a lot to create a file :(

有什么建议吗?

推荐答案

您可以将输入缓冲区转换为 Blob，获取它的 URL 并使用它来绘制到画布上:

You can convert your input buffer to a Blob instead, obtain an URL for it and use that to draw onto the canvas instead:

function onBinaryMessage(input) {

    var blob = new Blob([input], {type: 'image/png'});
    var url = URL.createObjectURL(blob);
    var img = new Image;

    img.onload = function() {
        var ctx = document.getElementById("canvas").getContext('2d');
        ctx.drawImage(this, 0, 0);
        URL.revokeObjectURL(url);
    }
    img.src = url;
}

请注意，这将是异步的，您需要在 onload 处理程序中提供回调机制(无论如何，您也确实需要在自己的示例中这样做).但是您不必转换为 base64 等，这是一项相对昂贵的操作.

Just note that this will be asynchronous and you would need to provide a callback-mechanism inside the onload handler (in any case you really need to do that in your own example as well). But you won't have to convert to base64 etc. which is a relative costly operation.

另请注意，URL.createObjectURL 目前是实验性的.

Also note that URL.createObjectURL is currently experimental.

相关文章