Javascript 未捕获类型错误：无法读取属性'；自然宽度'；null-FabricJs的示例-通过loadFromJSON在Fabric.js中预览视频

在fabric.js画布上预览视频时，我面临一个问题

FabricJS版本已试用：4.0.0-beta.8和3.6.3两个版本中的错误相同

它给出了错误的说法

Uncaught TypeError: Cannot read property 'naturalWidth' of null                          :fabric.js:20490

我如何将视频添加到画布的代码：

let objects = slideData.getObjects();
for (var i = 0; i < objects.length; i++) {
    if (objects[i].hasOwnProperty('videoUrl')) {
        var videoElement = createVideoElement(objects[i]['videoUrl']); //this function returns a video element
        var video = new fabric.Image(videoElement, {left: objects[i]['left'], top: objects[i]['top'], isBackgroundVideo: true});
        slideData.add(video);//adding video to canvas.
        video.sendBackwards();//setting video to be on the back so I can show text in front of it
        console.log(slideData);
    }
}

我尝试了大多数解决方案，但都不起作用。我不确定这里出了什么问题。如果我做错了什么，或者这只是fabric.js中的一个bug

---

若你们需要更多的代码，那个么我可以提供你们需要的注释。谢谢

请注意声明

slideData.renderAll.bind（slideData）

您是否可以在代码中的其他地方处置

slideData

canvas

在处理

slideData之后，contextContainer

变为

null

在一些内部fabric.js函数中有一个对

slideData.contextContainer.naturalWidth

的引用（我不太清楚，您可以在web控制台的错误堆栈跟踪中找到函数名。假设

slideData.renderAll

）。它解释了为什么

无法读取null的属性“naturalWidth”

错误

---

解决方法取决于你的情况。例如，添加检查

slideData.contextContainer！==null

或将执行流更改为在其他位置调用

slideData.dispose（）

。

如果添加以下信息，可以改进此问题：1。fabric.js版本2。完整堆栈跟踪（不仅仅是错误消息）3。显示一段代码，您可以在其中调用

slideData.dispose（）

（在我的回答中，我假设您是这样做的）感谢您抽出时间评估这个问题并告诉我们如何改进它。我添加了我遇到问题的版本。但是我没有堆栈跟踪，因为这个问题已经有5个月了，我不再从事那个项目了。另外，在我的代码中，我从未使用过

slideData.dispose（）

，因此我附加的代码中有一些错误。你的答案是信息性的，但很抱歉，我不能接受它作为正确的答案，因为我不想让其他人认为我的问题已经用你的答案解决了。谢谢

let jsonData = JSON.stringify(slideData.toObject(propertiesToSave)); //this is an array of properties which we want to save which includes isBackgroundVideo: true
slideData.loadFromJSON(jsonData, slideData.renderAll.bind(slideData), function(o, object) { //loading saved canvas data from JSON
    object.set('selectable', false);
    object.set('cursorHover', 'default');
    let objects = slideData.getObjects();
    for (var i = 0; i < objects.length; i++) {
        if (objects[i].hasOwnProperty('isBackgroundVideo')) {
            objects[i].getElement().play();
            fabric.util.requestAnimFrame(function render() {
                slideData.renderAll();
                fabric.util.requestAnimFrame(render);
            });
        }
    }
});

Uncaught TypeError: Cannot read property 'naturalWidth' of null                          :fabric.js:20490