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

Question

尝试在 fabric.js canvas 上预览视频时，我遇到了一个问题。

FabricJS 版本已尝试：4.0.0-beta.8 和 3.6.3 两者都有相同的错误

它给出了错误的说法

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

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

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

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

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 中的一个错误

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

Answer 1

注意语句slideData.renderAll.bind(slideData) 。

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

处置后slideData.contextContainer变为null 。

And there's a reference to slideData.contextContainer.naturalWidth inside some internal fabric.js function (I don't know exactly, you can find function name in the error stack trace in web console. let's assume slideData.renderAll ). 它解释了为什么您会收到Cannot read property 'naturalWidth' of null 。

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