Я большой поклонник fabric.js, я считаю его самым мощным JS, доступным для работы с холстом HTML5.
Мне было трудно рендерить видео на холст, затем сохранить его как объект JSON и снова отобразить на холсте с помощью loadFromJson.
Поскольку не существует официального способа сериализации и десериализации элемента видео проблема № 3697
Вы можете просто визуализировать видеоэлемент, используя ткань js, но, возможно, будущие выпуски будут с этой функцией, не уверен.
Вот как я это сделал
#шаг 1
Визуализируйте видеоэлемент на холст, ниже фрагмент кода отобразит видеоэлемент на холст.
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 = 'http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4'; var videoE = getVideoElement(url_mp4); var fab_video = new fabric.Image(videoE, {left: 0, top: 0}); canvas.add(fab_video); fab_video.getElement().play(); fabric.util.requestAnimFrame(function render() { canvas.renderAll(); fabric.util.requestAnimFrame(render); });
Теперь, если вы экспортируете холст как JSON
canvas.toJSON();
Вы увидите объект JSON с множеством атрибутов в объекте, но основные атрибуты, на которых нужно сосредоточиться, - это src
и type
{«objects»: [{«src»: «», «top»: 0, «left»: 0, «type»: «image»,…}, {}], «version»: «2.0 .0-rc.4 ”}
Примечание. src
- пусто, type
- изображение, означает, что ткань сохраняет видео как объект изображения, но не может назначить источник видео.
#шаг 2
Чтобы сохранить src
видеоэлементов, вам необходимо добавить настраиваемый атрибут к объекту ткани, для этого вам необходимо переопределить объект ткани .
fabric.Object.prototype.toObject = (function (toObject) { return function (propertiesToInclude) { propertiesToInclude = (propertiesToInclude || []).concat( ['video_src'] ); return toObject.apply(this, [propertiesToInclude]); }; })(fabric.Object.prototype.toObject);
Приведенный выше код добавит настраиваемый атрибут video_src
к объекту JSON при экспорте, вы можете инициализировать его глобально.
Примечание. Установите атрибут
video_src
перед добавлением элемента видео на холст.
var fab_video = new fabric.Image(videoE, {left: 0, top: 0}); fab_video.set('video_src', url_mp4); canvas.add(fab_video);
Вы увидите экспортированный объект как:
{«объекты»: [{«src»: «», «video_src»: « http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4 », «вверх »: 0,« left »: 0,« type »:« image »,…}, {}],« version »:« 2.0.0-rc.4 »}
# step3
Вы успешно сохранили источник видео в объекте JSON. Теперь нам нужно снова отрендерить его, используя loadFromJSON.
Метод loadFromJSON, используемый для преобразования объекта JSON в фактический объект ткани и загрузки их на холст.
Теперь вопрос в том, как он будет понимать настраиваемый атрибут video_src
, ответ - нет, нам нужно снова создать элемент видео и отрендерить его вручную.
Для этого нам нужно перебрать объекты в методе обратного вызова loadFromJSON, найти видеообъект и обработать его вручную, остальные объекты, то есть текст, изображение, будут отображаться правильно. .
var data = {“objects”: [{“src”: “”, “video_src”: “http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4”, “top”: 0, “left”: 0, “type”: “image”, …}, {}], “version”: “2.0.0-rc.4” } var canvas = canvas.loadFromJSON(JSON.stringify(data), canvasLoaded , function(o, object) { fabric.log(o, object); }); 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); }); } } }
Это обходной путь для сериализации и десериализации видеоэлементов с использованием фабрики.
(Помогите другим найти мою статью на Medium, предоставив ее 👏🏽 ниже.)