Javascript 如何在fabricJS中使用canvas.loadFromJSON加载视频

我试图将视频设置为画布上的背景，当我第一次设置它时，效果很好。但当使用loadFromJSON（）重新加载时，它在画布上显示空白背景

我用的是角度6

下面是片段

（注意：这里我使用了简单类。而在我的代码中，我使用了大量自定义类）

var removeFromArray=fabric.util.removeFromArray；
var custom_attributes=['customSourceType'，'id'，'scaleMode'，'original_src'，'exclusiveName'，'video_src'，'background_image']；
fabric.Object.prototype.toObject=（函数（toObject）{
返回函数（propertiesToInclude）{
propertiesToInclude=（propertiesToInclude | |[]）.concat(
['video\u src'，'background\u image'，'src']
);
返回到Object.apply（此[propertiesToInclude]）；
};
})（fabric.Object.prototype.toObject）；
fabric.Object.NUM_分数_位数=2；
fabric.Object.prototype.set({
边框颜色：'#00c3f9'，
角落颜色：'#00c3f9'，
cornerStrokeColor:“#ffffff”，
cornerStyle:“圆形”，
最低限额：0，
lockScalingFlip：对，
selectionDashArray:[5,0]，
borderDashArray:[5,5]，
cornerDashArray:[2,0]，
borderScaleFactor:1，
尺寸：15，
透明角：错误，
中心旋转：正确
});
var canvas=new fabric.canvas（'c'{
光标悬停：“指针”，
选择：正确，
选择边框颜色：“#00c3f9”，
selectionColor:'rgba（0,195,249,0.2）'，
对,对，
原文：“中心”，
原文：'中心'，
});
var url\u mp4=http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4';
函数getVideoElement（url）{
var video=document.createElement（'video'）；
视频宽度=400；
高度=250；
videoE.muted=真；
videoE.crossOrigin=“匿名”；
var source=document.createElement（'source'）；
source.src=url；
source.type='video/mp4'；
视频E.附加子项（来源）；
返回视频；
}
var videoE=getVideoElement（url\u mp4）；
var fab_video=newfabric.Image（videoE，{left:0，top:0}）；
fab_video.set（'video_src'，url_mp4）；
fab_video.set（'background_image'，url_mp4）；
fab_video.set（'video_src'，url_mp4）；
canvas.setBackgroundImage（fab_视频）；
fab_video.getElement（）.volume=0；
fab_video.getElement（）.play（）；
fabric.util.requestAnimFrame（函数render（））{
canvas.renderAll（）；
fabric.util.requestAnimFrame（渲染）；
});
var data=canvas.toJSON（自定义_属性）；
$（document.body）.on（'单击'，'加载FromJSON'，函数（）{
console.clear（）；
var json=canvas.toJSON（自定义_属性）；
loadFromJSON（json，canvasLoaded）；
});
函数canvasLoaded（）{
var jsonDATA=canvas.toJSON（自定义_属性）；
canvas.renderal.bind（canvas）；
var canvasBG=jsonDATA['backgroundImage']；
控制台日志（canvasBG）；
if（canvasBG.hasOwnProperty（'video_src'））{
var url\u mp4=http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4';
var videoE=this.getVideoElement（url_mp4480620）；
fab_video=新面料。图像（视频{
左:0,，
排名：0，
身高：480，
宽度：620，
objectCaching:false，
excludeFromExport:false
});
fab_video.toObject=（函数（toObject）{
返回函数（）{
返回fabric.util.object.extend（toObject.call（this），{'video\u src'：url\u mp4，'background\u image'：url\u mp4}）；
};
})（fab_video.toObject）；
canvas.setBackgroundImage（制作视频，函数（）{
canvas.renderal.bind（canvas）；
}, {
身高：480，
宽度：620，
交叉源：“匿名”，
背景图片：url\u mp4，
isFromServer:true，
视频地址：url\u mp4
});
fab_video.getElement（）.volume=0；
fab_video.getElement（）.play（）；
fabric.util.requestAnimFrame（函数render（））{
canvas.renderAll（）；
fabric.util.requestAnimFrame（渲染）；
});
}
}

从JSON加载

多亏了这个博客，它才得以运行

---

我已经为其他面临相同问题的人更新了问题中的工作片段。

您遇到了什么错误？背景正在画布上添加，但显示的是空白画布。我也有同样的问题。从json加载时，视频不会在后台加载，并且控制台中不会发生错误。我不知道我错在哪里。这段代码在这里工作，但当我把这段代码放在我的项目中时，又出现了同样的问题。在代码段中运行代码有什么原因吗？@mayurkukadiya我已经更新了代码段，这对您很有用。这个问题已经解决了。检查它。@umesh Padatiya，你能分享你的解决方案吗？@user2810718你可以检查问题的片段。。它的工作片段，因为我已经更新了它。