Fabricjs -通过loadFromJSON在FabricJs中预览视频
我正在尝试使用loadFromJSON在Fabricjs canvas上加载视频。首先，我将视频添加到JSON，然后将该JSON加载到同一画布以使其再次播放。(这不是最终目标，但为了解决问题，所以你们可以重现问题)，但不幸的是，即使在尝试了大多数可能的解决方案后，我也无法做到这一点。
我遵循了这本指南
https://itnext.io/video-element-serialization-and-deserialization-of-canvas-fc5dbf47666d
为了让它像在另一个堆栈溢出答案中给出的那样工作，但它看起来已经过时了。我得到了这个错误
下面我附上了我的代码。请看一下。
HTML代码
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="vendors/Bootstrap/bootstrap.min.css">
</head>
<body>
<canvas id="c" width="1280" height="720"></canvas>
<!--Javascripts-->
<script src="vendors/jQuery/jquery-3.4.1.slim.min.js"></script>
<script src="vendors/Bootstrap/bootstrap.min.js"></script>
<script src="vendors/Bootstrap/popper.min.js"></script>
<script src="vendors/FabricJs/fabric.js"></script>
<script src="js/script.js"></script>
</body>
</html>来自script.js的Javascript代码
window.cancelRequestAnimFrame = (function() {
return window.cancelAnimationFrame ||
window.webkitCancelRequestAnimationFrame ||
window.mozCancelRequestAnimationFrame ||
window.oCancelRequestAnimationFrame ||
window.msCancelRequestAnimationFrame ||
clearTimeout
})();
var data = "";
function getVideoElement(url) {
var videoE = document.createElement('video');
videoE.width = 530;
videoE.height = 298;
videoE.muted = true;
videoE.crossOrigin = "anonymous";
var source = document.createElement('source');
source.src = url;
source.type = 'video/mp4';
videoE.appendChild(source);
return videoE;
}
var canvas = new fabric.Canvas('c');
var url_mp4 = 'https://player.vimeo.com/external/197634410.sd.mp4?s=0d1deba61e621a45218d6488e384219dc7173ae5&profile_id=164';
var videoE = getVideoElement(url_mp4);
var fab_video = new fabric.Image(videoE, {left: 0, top: 0});
fab_video.set('video_src', url_mp4);
canvas.add(fab_video);
fab_video.getElement().play();
var render_request;
var render = function render() {
canvas.renderAll();
render_request = fabric.util.requestAnimFrame(render);
fab_video.getElement().onended = function() {
cancelRequestAnimFrame(render_request);
alert("finished");
data = canvas.toJSON();
console.log(data);
canvas = canvas.loadFromJSON(JSON.stringify(data), canvasLoaded, function(o, object) {
fabric.log(o, object);
});
};
}
fabric.util.requestAnimFrame(render);
function canvasLoaded() {
canvas.renderAll.bind(canvas);
var objs = data['objects'];
for (var i = 0; i < objs.length; i++) {
if (objs[i].hasOwnProperty('video_src')) {
var videoE = getVideoElement(objs[i]['video_src']);
var fab_video = new fabric.Image(videoE, {left: objs[i]['left'], top: objs[i]['top']});
canvas.add(fab_video);
fab_video.getElement().play();
fabric.util.requestAnimFrame(function render() {
canvas.renderAll();
fabric.util.requestAnimFrame(render);
});
}
}
}
fabric.Object.prototype.toObject = (function(toObject) {
return function(propertiesToInclude) {
propertiesToInclude = (propertiesToInclude || []).concat(
['video_src']
);
return toObject.apply(this, [propertiesToInclude]);
};
})(fabric.Object.prototype.toObject);如果有人能说出我做错了什么，那将是很大的帮助，因为我从某一天开始就被困在了这一点上。
回答 1
Stack Overflow用户
发布于 2021-03-22 20:28:35
不确定是不是为你修好了。但当我遵循指南时，同样的问题也发生在我身上：
https://itnext.io/video-element-serialization-and-deserialization-of-canvas-fc5dbf47666d
我认为这个问题的发生是因为我们试图将视频加载为src为'‘的图像，这导致了上面的错误(当它试图读取属性naturalWidth时)。在我的例子中，简单地升级到fabric的更高版本就解决了这个问题。
https://stackoverflow.com/questions/62155072
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号