如何在通过Base64 String格式的JSON传递的HTML5画布上显示图像?

用户名

尽管我已经看到很多与此非常相似的问题,但仍需要一些帮助,但是我仍然无法解决。因此,我从服务器端编写了一个程序,将帧字节数组(从Kinect RGB相机)转换为Base64 String格式,然后将String传递给客户端。在客户端,我很困惑如何在画布上显示图像?

因此,基本上我的部分代码是这样的:

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 = ??????

    }
};

任何有关的答案将不胜感激。谢谢!:D

ReeCube

这应该工作:

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在具有更好插值的html5画布上缩放图像?

如何在HTML5画布上绘制背景图像

如何在html5画布上放置重叠图像?

如何在HTML5画布上使用图像而不在页面上预先放置图像?

如何将HTML5画布另存为服务器上的图像?

通过从图像中心旋转并缩放来拉直HTML5画布中的图像

如何在HTML5画布中显示多个外部SVG图形

在HTML5画布上绘图:如何在鼠标指针的尖端进行绘图

如何在HTML5画布上绘制多边形?

如何在变形的HTML5画布上获取鼠标位置

当HTML5画布包含图像作为对象时,如何捕捉它

如何将图像上传到HTML5画布

如何将HTML5画布作为图像存储在框架列表中?

通过 JSON 发送 base64 音频,如何在 <audio> 元素中使用?

如何在HTML中显示base64编码的图像

如何使此HTML5画布脚本全屏显示?

如何围绕任意点旋转HTML5画布上的任何形状或点?

如何用手写笔在HTML5画布上绘制

如何绘制在html5画布上非常接近的x和y轴坐标?

如何为边框创建html5画布?

如何将html5画布上的click事件传递给同级canvas元素上的事件侦听器

如何将HTML5画布图像另存为附件,并使用XPages在Basic Notes客户端的RichText字段中显示它们

如何通过.ajax以base64编码发布图像?

如何在不更改图案的情况下更改HTML5画布中图像的颜色

如何在Javascript中显示base64图像

如何在Javascript和HTML5画布上以2D模式在对象前面绘制圆圈

base64_decode HTML5画布,返回null

如何在MATLAB中读取base64图像?

Spring:如何在@RestController中返回base64图像