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

以下是一种更快，更有效的替代方法：

在内存中创建一个html canvas元素，并在该画布上绘制传入的图像。
```
var canvas=document.createElement('canvas');
var ctx=canvas.getContext('2d');
```

使用canvas元素创建一个Kinetic.Image作为它的图像源：

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

然后您可以在html画布上绘制新的传入图像，您的Kinetic.Image将自动使用新图像进行更新。
```
ctx.drawImage(yourNewImageObject,0,0);
layer.drawScene();
```

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

... BTW

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

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

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

1 个答案: