未捕获的类型错误：无法读取 null 的属性“naturalWidth” - FabricJs - 通过 loadFromJSON 在 Fabric.js 中预览视频答案

【问题标题】：Uncaught TypeError: Cannot read property 'naturalWidth' of null - FabricJs - preview a video in Fabric.js via loadFromJSON未捕获的类型错误：无法读取 null 的属性“naturalWidth” - FabricJs - 通过 loadFromJSON 在 Fabric.js 中预览视频
【发布时间】：2020-09-14 06:40:28
【问题描述】：

我在尝试在 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);
    }
}

我如何尝试在画布上预览视频的代码：

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

但是当我执行这段代码时，fabric.js 给出了错误。

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

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

如果你们需要更多代码，那么我可以提供您需要的评论。谢谢

【问题讨论】：

如果您添加以下信息，这个问题可以得到改善： 1. fabric.js 版本 2. 完整的堆栈跟踪（不仅仅是错误消息） 3. 在您调用slideData.dispose() 的地方显示一段代码（在我的回答中，我假设你这样做）
感谢您抽出宝贵时间评估问题并说明如何改进。我添加了我遇到问题的版本。但我没有堆栈跟踪，因为这个问题已经 5 个月了，我不再从事那个项目了。同样在我的代码中，我从未使用过slideData.dispose()，所以我附加的代码中有问题。您的回答是信息性的，但很抱歉我不能接受它作为正确答案，因为我不希望其他人知道我的问题已通过您的回答得到解决。谢谢

标签： javascript html5-canvas html5-video fabricjs

【解决方案1】：

注意slideData.renderAll.bind(slideData)的声明。

您是否可以在代码中的其他位置处理slideData canvas？

处理后slideData.contextContainer变成null。

并且在一些内部 fabric.js 函数中有对slideData.contextContainer.naturalWidth 的引用（我不太清楚，你可以在 web 控制台的错误堆栈跟踪中找到函数名称。假设slideData.renderAll）。它解释了为什么会出现Cannot read property 'naturalWidth' of null 错误。

修复取决于您的情况。例如，添加检查 slideData.contextContainer !== null 或更改执行流程以在不同的位置调用 slideData.dispose()。

【讨论】：