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

问题描述 投票:0回答:2

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

我正在使用角度 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>

javascript html video fabricjs
2个回答
4
投票

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

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


0
投票
最新的方法是从 Image 类创建 Video 类。

import { Image classRegistry } from 'fabric'; class Video extends Image { static type = 'Video'; constructor(videoElement, options = {}) { super(videoElement, options); this.videoElement = videoElement; // The actual video DOM element } toObject(propertiesToInclude = []) { return { ...super.toObject(propertiesToInclude), src: this.videoElement.src, // Serialize video source }; } _render(ctx) { if (this.videoElement) { ctx.drawImage( this.videoElement, -this.width / 2, -this.height / 2, this.width, this.height ); } } static fromObject(object) { return new Promise((resolve) => { const videoElement = document.createElement('video'); videoElement.src = object.src; videoElement.crossOrigin = 'anonymous'; videoElement.autoplay = true; videoElement.loop = true; videoElement.onloadeddata = () => { videoElement.width = object.width; videoElement.height = object.height; const video = new Video(videoElement, object); video.crossOrigin = 'anonymous'; video.set(object); resolve(video); }; }); } } classRegistry.setClass(Video, Video.type);
请注意,这不会自动播放视频。我故意留下了它,因为我的案例不需要它。一旦#loadFromJSON 调用完成,您就可以执行此操作。

© www.soinside.com 2019 - 2024. All rights reserved.