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

这里需要一些帮助虽然我已经看到很多与此非常相似的问题，但我仍然无法解决它。 因此，我在服务器端编写了一个程序，将帧字节数组（来自Kinect RGB camera）转换为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);
                }

            }
        }
    }

我将colorstream帧字节数组转换为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 = ??????

    }
};

任何与此相关的回答都将不胜感激。谢谢这应该是可行的：

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

---

感谢您的回答，可能重复！顺便问一下，我如何知道base64图像数据的名称？因为我传递了Kinect摄像机的图像。我明白了~um。。我的意思是“您必须用base64图像数据的名称替换'REPLACETHIS'”这是什么意思？您如何从Kinect摄像头接收图像。因此，我将彩色像素作为字节数组。它从colorFrame.CopyPixelDataTo（colorPixels）接收数据。然后我将这个帧字节数组转换为Base64字符串，并使用json发送它。所以现在我想把它展示在画布上。实际上，我正在做的是从Kinect RGB摄像头直播。我通过研究得出这个解决方案。我也读过关于位图的内容，但我无法在web浏览器上显示图像/视频。因此，请将“REPLACETHIS”替换为您从服务器收到的json格式的字符串