fabric canvas - Forum

Forum Navigation
You need to log in to create posts and topics.

fabric canvas

Hi,

 

Is there a way to create chroma key effects (green screen, etc.,) with the fabric canvas plugin?  How do I overlay one image mask over another?

Thanks,

I wish to create an effect like this with canvas:

https://zimjs.com/zim/assets.html

 

@fkapnist although FabricJS plugin is mainly for image manipulation, you can use JavaScript to include video files (click here for a sample). I have not seen any chroma key sample using the original FabricJS JavaScript library.
Anyway, note that you can easily import ZimJS into VisualNEO Web and use all of its capabilities.
That's one of the libraries I would like to include in a plugin but it would be a huge effort.

fkapnist has reacted to this post.
fkapnist
Quote from luishp on January 22, 2023, 7:36 pm

@fkapnist although FabricJS plugin is mainly for image manipulation, you can use JavaScript to include video files (click here for a sample). I have not seen any chroma key sample using the original FabricJS JavaScript library.
Anyway, note that you can easily import ZimJS into VisualNEO Web and use all of its capabilities.
That's one of the libraries I would like to include in a plugin but it would be a huge effort.

I want to overlay text on an image (or video) but the Fabric controls only allow for headlines and not for entire paragraph overlays. How do I create line breaks ( \n or BR) in Fabric?

 

@luishp

"I have not seen any chroma key sample using the original FabricJS JavaScript library."


Some samples on the fabricjs home page Fabric.js Javascript Canvas Library (fabricjs.com) do appear to use chroma key. If you drag the image of the bug (or the robot) onto the picture of a black and white paragraph just above it, the bug will float on top with a transparent background, which is exactly what I am looking for. But what is to code for this?

 

I found this on Stackoverflow :

"I'm not sure if I'm understanding you correctly, but you can just load in a .png with transparency in it and it'll show the canvas background in the transparent parts."

https://stackoverflow.com/questions/37752806/fabricjs-background-with-transparent-parts

So a video clip with an alpha channel will also show the canvas background in its transparent parts?

I'll try and see if I can get it to work....

 

 

 

I can assign transparency to a color when I save a gif or png file, but I don't know how to re-assign transparency to a different color within the fabric program. Maybe it is not possible?

@fkapnist usually raster images use three values to describe each pixel: Red, Green and Blue. Each one with a value that ranges from 0 to 255. When you save a PNG with transparency it includes an additional value for the "Alpha channel" for each pixel. It stores pixel opacity and also ranges from 0 to 255. GIF images doesn't have a real Alpha Channel. In fact they can only show up to 255 different colors and one transparent color. That's the reason the transparency seems so pixelated in the borders. As far as I know you can reassign the transparency color once the GIF image has been saved.

RE: "you can use JavaScript to include video files (click here for a sample). "

 

The sample is a video of a house cat. But where in the code is the  actual file name of the video specified? I can't find it... How do I include my video?

@fkapnist take a look at this line:

var video1El = document.getElementById('video1');

They are getting the video file from a HTML <video> element with id "video1". This element is included whenever you use CreateVideoPlayer command.
It just add a "Video" word to the Container name. For example if you use this command:

CreateVideoPlayer "Container1" "D:\videos\myvideo.mp4" true false false false

Your <video> id will be "Container1Video".
You can place your Contaniner out of sight or make it invisible if you want.

 

 

Quote from luishp on January 22, 2023, 10:06 pm

@fkapnist take a look at this line:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
var video1El = document.getElementById('video1');
var video1El = document.getElementById('video1');
var video1El = document.getElementById('video1');

They are getting the video file from a HTML <video> element with id "video1". This element is included whenever you use CreateVideoPlayer command.
It just add a "Video" word to the Container name. For example if you use this command:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
CreateVideoPlayer "Container1" "D:\videos\myvideo.mp4" true false false false
CreateVideoPlayer "Container1" "D:\videos\myvideo.mp4" true false false false
CreateVideoPlayer "Container1" "D:\videos\myvideo.mp4" true false false false

Your <video> id will be "Container1Video".
You can place your Contaniner out of sight or make it invisible if you want.

 

 

Thanks!

Where is the source code for this example?

https://visualneo.com/tutorials/videoplayer/#!/NewPage

I added a Load Video button and specified the file I want it to load,

CreateVideoPlayer "Container1" "D:\videos\myvideo.mp4" true false false false

But when I click it still asks me to load an image file and then nothing happens....

What am I doing wrong?

 I can't find any VisualNEO source code examples for loading and playing a video from the user's local drive. There are only examples for YouTube and Vimeo...

 

My mistake.

I used a FileInput element instead of a normal button.

However, if I embed the new video container into Container1 nothing works. And I really don't understand how the fabric javascript adds an extra word to the Container name? I am quite confused there...

To make a long story short, here is what I want to do with fabric canvas (see images):

I want users to be able to create digital cards with overlays. And with video if possible

(I don't think fabric canvas can save videos, so I will look for another solution using HTML layers)...

 

.

Uploaded files:
  • You need to login to have access to uploads.
Quote from luishp on January 22, 2023, 7:36 pm

@fkapnist although FabricJS plugin is mainly for image manipulation, you can use JavaScript to include video files (click here for a sample). I have not seen any chroma key sample using the original FabricJS JavaScript library.
Anyway, note that you can easily import ZimJS into VisualNEO Web and use all of its capabilities.
That's one of the libraries I would like to include in a plugin but it would be a huge effort.

Maybe instead of a library plugin you could include the <canvas> tag in your program toolbar, next to Container, Form, iFrame, etc.

Users of VisualNEO Web might then be able to create their own canvas framework, like Zim or Createjs.

.

Maybe instead of a library plugin you could include the <canvas> tag in your program toolbar, next to Container, Form, iFrame, etc.
Users of VisualNEO Web might then be able to create their own canvas framework, like Zim or Createjs.

You can add it manually or using neoScript or JavaScript code very easily:

  1. Add a Container object
  2. Right click the Container
  3. Click "Edit HTML property"
  4. Include your <canvas> HTML element and desired attributes.

You can do the same with neoScript using SetObjectHTML command.
FabricJS plugin uses that technique but by using JavaScript.
If you are interested I can share with you the plugin source code.

Regards.

fkapnist has reacted to this post.
fkapnist
Open chat
1
Do you need more info?
Hi, do you have any doubt?