Question

目前，我从信号器连接中获取了一个JPEG字节数组并将其加载到图像中，而在image.onload事件中，我将图像绘制到我的画布上。

这样：

desktopImage.onload = function () {
    myCanvasContext.drawImage(desktopImage, 0, 0);
}

chat.client.broadcastMessage = function (jpeg) {
    desktopImage.src = 'data:image/jpeg;base64,' + jpeg;
}

哪种方法效果很好。

我想知道是否可以通过直接将图像绘制到画布上来“加快”此过程，而无需先将其加载到第1张图像。

有可能吗？

Answer 1

如果您收到一个字节数组，假设是ArrayBuffer，您可以将其包装为Blob对象并为其创建一个对象URL。这将节省编码和解码Base-64的显着开销：

实施例

var desktopImage = new Image();
var url;

desktopImage.onload = function () {
    myCanvasContext.drawImage(desktopImage, 0, 0);
    (URL || webkitURL).revokeObjectURL(url);  // release memory
}

// assuming jpeg = ArrayBuffer:
chat.client.broadcastMessage = function (jpeg) {
    var blob = new Blob([jpeg], {type: "image/jpeg"});
    url = (URL || webkitURL).createObjectURL(blob);

    desktopImage.src = url;
}

将jpeg数组直接绘制到Canvas上

1 个答案:

实施例