KineticJS：使用 Kinetic.image 读取连续图像并显示

Question

我正在使用 KineticJS 来显示类似于网络摄像头的设备的图像。要阅读图像，我可以使用返回 JPG 图像的 URL。出于测试目的，当鼠标光标在画布上移动时，我刚刚添加了一个事件。但更新图像失败。只显示第一个。

我认为是缓存问题，但我找不到问题所在。

有什么帮助吗？提前致谢。

这是我的 JavaScript：

var stage;
var layer;
var dynamicImg;

stage = new Kinetic.Stage({
    container: "container",
    width: 640,
    height: 480,
    id: "myCanvas",
    name: "myCanvas"
});

layer = new Kinetic.Layer();
//gets the canvas context
var canvas = stage.getContainer();

function drawImage(imageObj) {
    dynamicImg = new Kinetic.Image({
        image: imageObj,
        x: 0,
        y: 0,
        width: 640,
        height: 480,
        draggable: false,
    });

    layer.add(dynamicImg);
    stage.add(layer);
    layer.draw();
};

var imageObj = new Image();
imageObj.onload = function () {
    drawImage(this);
};

imageObj.src = 'http://<ip>/live.cgi';

stage.on('contentMousemove', function () {
    imageObj = new Image();
    imageObj.onload = function () {
        layer.removeChildren();
        drawImage(imageObj);
        layer.draw();
    };
    imageObj.src = 'http://<ip>/live.cgi';
});

Answer 1

下面是另一种更快、更有效的方法：

1. 在内存中创建一个 html 画布元素并在该画布上绘制传入的图像。

   var canvas=document.createElement('canvas');
   var ctx=canvas.getContext('2d');
   

2. 使用画布元素作为图像源创建 Kinetic.Image：

   dynamicImg = new Kinetic.Image({
       image: canvas,
       x: 0,
       y: 0,
       width: 640,
       height: 480,
       draggable: false,
   });
   

3. 然后您可以在 html 画布上绘制新传入的图像，您的 Kinetic.Image 将自动更新为新图像。

   ctx.drawImage(yourNewImageObject,0,0);
   layer.drawScene();
   

这种方法比使用每个新图像重新创建一个新的 Kinetic.Image 更快、更有效。

顺便说一句...

我看到您的图片来源是“http:///live.cgi”。如果这意味着您正在接收一系列单独的图像，那么您可能会遇到麻烦。单个图像需要一些时间才能转换为单个图像对象。如果您快速接收大量图像，则加载每个图像对象的延迟可能会使您的应用程序崩溃。

相反，您可以将传入的图像编码为视频流，然后将该流拉入 html 视频元素。 html 画布可以将视频元素作为内容源。这样您就不会在加载单个图像对象时遇到问题。这是一个显示如何在画布元素中显示视频元素的链接：http://html5doctor.com/video-canvas-magic/。