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

Question

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

我正在使用 angular 6 。

这是片段

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

 var removeFromArray = fabric.util.removeFromArray; var custom_attributes = ['customSourceType', 'id', 'scaleMode', 'original_src', 'exclusiveName', 'video_src', 'background_image']; fabric.Object.prototype.toObject = (function (toObject) { return function (propertiesToInclude) { propertiesToInclude = (propertiesToInclude || []).concat( ['video_src', 'background_image', 'src'] ); return toObject.apply(this, [propertiesToInclude]); }; })(fabric.Object.prototype.toObject); fabric.Object.NUM_FRACTION_DIGITS = 2; fabric.Object.prototype.set({ borderColor: '#00c3f9', cornerColor: '#00c3f9', cornerStrokeColor: '#ffffff', cornerStyle: 'circle', minScaleLimit: 0, lockScalingFlip: true, selectionDashArray: [5, 0], borderDashArray: [5, 5], cornerDashArray: [2, 0], borderScaleFactor: 1, cornerSize: 15, transparentCorners: false, centeredRotation: true }); var canvas = new fabric.Canvas('c', { hoverCursor: 'pointer', selection: true, selectionBorderColor: '#00c3f9', selectionColor: 'rgba(0, 195, 249, 0.2)', preserveObjectStacking: true, originX: 'center', originY: 'center', }); var url_mp4 = 'http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4'; function getVideoElement(url) { var videoE = document.createElement('video'); videoE.width = 400; videoE.height = 250; videoE.muted = true; videoE.crossOrigin = "anonymous"; var source = document.createElement('source'); source.src = url; source.type = 'video/mp4'; videoE.appendChild(source); return videoE; } var videoE = getVideoElement(url_mp4); var fab_video = new fabric.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_video); fab_video.getElement().volume = 0; fab_video.getElement().play(); fabric.util.requestAnimFrame(function render() { canvas.renderAll(); fabric.util.requestAnimFrame(render); }); var data = canvas.toJSON(custom_attributes); $(document.body).on('click', '#loadfromjson' ,function(){ console.clear(); var json = canvas.toJSON(custom_attributes); canvas.loadFromJSON(json, canvasLoaded); }); function canvasLoaded() { var jsonDATA = canvas.toJSON(custom_attributes); canvas.renderAll.bind(canvas); var canvasBG = jsonDATA['backgroundImage']; console.log(canvasBG); if(canvasBG.hasOwnProperty('video_src')) { var url_mp4 = 'http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4'; var videoE = this.getVideoElement(url_mp4, 480, 620); fab_video = new fabric.Image(videoE, { left: 0, top: 0, height: 480, width: 620, objectCaching: false, excludeFromExport: false }); fab_video.toObject = (function (toObject) { return function () { return fabric.util.object.extend(toObject.call(this), { 'video_src': url_mp4, 'background_image': url_mp4 }); }; })(fab_video.toObject); canvas.setBackgroundImage(fab_video, function () { canvas.renderAll.bind(canvas); }, { height: 480, width: 620, crossOrigin: 'anonymous', background_image: url_mp4, isFromServer: true, video_src: url_mp4 }); fab_video.getElement().volume = 0; fab_video.getElement().play(); fabric.util.requestAnimFrame(function render() { canvas.renderAll(); fabric.util.requestAnimFrame(render); }); } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.min.js?v1"></script> <button id="loadfromjson">Load from JSON</button> <canvas id="c" width="600" height="400"></canvas>

Answer 1

感谢这个博客， 从这里开始工作。

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