如何在 HTML5 画布上以 Base64 字符串格式显示从 JSON 传递的图像？

Question

在这里需要一些帮助虽然我已经看到很多与此非常相似的问题，但我仍然无法解决它。 因此，我从服务器端编写了一个程序，将帧字节数组（来自 Kinect RGB 相机）转换为 Base64 字符串格式，然后将字符串传递给客户端。在客户端，我很困惑如何在画布上显示图像？

所以，我的部分代码基本上是这样的：

private static byte[] colorPixels;

static private void InitilizeKinect()
    {
        var sensor = KinectSensor.KinectSensors.SingleOrDefault(); 

        if (sensor != null)
        {
            sensor.ColorStream.Enable(ColorImageFormat.RgbResolution640x480Fps30);

            colorPixels = new byte[sensor.ColorStream.FramePixelDataLength];

            sensor.ColorFrameReady += SensorColorFrameReady;

            sensor.Start();
        }
}

static void SensorColorFrameReady(object sender, ColorImageFrameReadyEventArgs e)
    {

        if (!_serverInitialized) return;

        using (ColorImageFrame colorFrame = e.OpenColorImageFrame())
        {
            if (colorFrame != null)
            {
                colorFrame.CopyPixelDataTo(colorPixels);

                String json = Convert.ToBase64String(colorPixels);
                foreach (var socket in _clients)
                {
                    socket.Send(json);
                }

            }
        }
    }

我将颜色流帧字节数组转换为 Base64 字符串，以便使用 JSON 将其传递到客户端。没有错误，我可以运行服务器，客户端也可以接收连接，但画布什么也不显示。我不知道如何填充图像源。

这是我的 javascript 的一部分：

 socket.onmessage = function (event) {
    if (typeof event.data === "string") {
        status.innerHTML = "Kinect RGB received.";

        // Get the data in JSON format.
        var jsonObject = JSON.parse(event.data);

    var img = new Image();
    img.onload = function () {
    context.drawImage(img, 0, 0);
    }
    img.src = ??????

    }
};

任何相关的答案将不胜感激。谢谢！ :D

Answer 1

这应该可行：

socket.onmessage = function (event) {
    if (typeof event.data === "string") {
        status.innerHTML = "Kinect RGB received.";

        // Get the data in JSON format.
        var jsonObject = JSON.parse(event.data);

        var img = new Image();
        img.onload = function () {
            context.drawImage(img, 0, 0);
        }
        img.src = "data:image/  png;base64," + jsonObject.REPLACETHIS;
        // you have to replace 'REPLACETHIS' by the name of your base64 image data
    }
};