How to display the image on HTML5 canvas that passed from JSON with Base64 String format?

Question

Need some help here although I've seen a lot of questions very similar with this, but I still cannot solve it. So, I have written a program from the server side that convert frame byte array (from Kinect RGB camera) to Base64 String format, and then I passed the String to the client side. In the client side, I got confused how to display the image on the canvas?

So, basically partial of my code is like this:

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

            }
        }
    }

I converted the colorstream frame byte array to Base64 string in order to pass it to the client side using JSON. There is no error and I can run the server and the client can receive the connection as well, but the canvas displays nothing. I do not know how to fill the image source.

Here is partial of my 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 = ??????

    }
};

Any answer related will be appreciated. thanks! :D

Answer 1

This should work:

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