将 jpeg 数组直接绘制到 Canvas 上

Question

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

所以：

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

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

哪个效果好。

我想知道是否可以通过将图像直接绘制到画布上来“加速”这个过程，而无需首先将其加载到图像中。

有可能吗？

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;
}