Load image and auto-scale

#1 · August 18, 2019, 7:42 am

Hi,

I tried the fabric-canvas demo, and it looks good. Is there a way to load and image and auto-scale them to fit the container width? I tried below but it doesn't work as the 'active object' was not selected.

fabLoadImage "Container1" "" "[laurl]" 0 0
fabScale "Container1" "" 0.25

Any advice to identify the active object or have it auto-scaled upon loading?

#2 · August 18, 2019, 12:34 pm

Hi @ronnie, no time to experiment now but try using a name (second parameter) for the image object you want to scale.
Otherwise, active object is the one selected by the user.
That plugin is really powerful, take a look at the original library here:
http://fabricjs.com/

Regards.

#3 · August 18, 2019, 5:09 pm

@luishp

Yes, agreed the fabricjs is powerful. The rest of the features in the demo works great. I've read the original fabricjs too

Anyway, i still cannot get the loaded image to scale automatically upon loading (image size is much bigger than the container1 window). I could only scale it when I manually click on the Container1 to 'active' the image frame. Even using the 2nd param does not work. Console window shows error msg: "TypeError: Unable to get property "scale" of undefined or null reference at fabScale..."

#4 · August 19, 2019, 12:03 pm

Sorry @ronnie, after taking a look it seems to me a bug.
Will try to solve it as soon as possible.

Regards.

#5 · August 19, 2019, 1:06 pm

Hi luishp

Thanks for taking the time to check it, and spotting the bug. The Getprop and SetProp buttons don’t seem to work at all, with error “Value of undefined: undefined” error. I agreed fabricjs is a powerful and essential tool...

Thanks again...

#6 · August 19, 2019, 5:50 pm

Hi @ronnie, I think the problem is because asyncronous image loading.
We try to scale the image before it has been loaded.
Please, try this:

fabLoadImage "Container1" "img1" "https://visualneo.com/wp-content/uploads/2019/05/allboxes-visualneo.png" 0 0
Wait 500
fabScale "Container1" "img1" 0.25

#7 · August 19, 2019, 5:54 pm

The Getprop and SetProp buttons don’t seem to work at all, with error “Value of undefined: undefined” error.

The bug is within the button code.
Change this:

jsAlert "Value of [propetyName]: [resultado1]"

For this:

jsAlert "Value of [propertyName]: [resultado1]"

For a list of valid properties check this:
http://fabricjs.com/docs/fabric.Object.html

Try with property "fill" value "red"

Let me know if this works for you.
Regards.

#8 · August 20, 2019, 3:31 pm

Hi luishp

Thanks. Using the "Wait 500" works for the large image (4000x4000) although I noticed when I reduced the resolution to 1200x1200, there is no need for the "Wait" command. Anyway, as you mentioned it's asynchronous... it's a good workaround especially when we don't know the image resolution beforehand..

I noticed the importance of checking out the valid Properties, and noticed you did not include some functions. I then realised you have the "fabSetProperty" function which makes the fabricjs plugin even more powerful. For example, I tried to use script to rotate the image, but it rotated on the 'left axis' and not in the center. After googling around, I found the workaround. Below are the codes should anyone using fabricjs need to rotate an image/object around its center axis.

fabSetProperty "Container1" "Image1" "originX" "center"
fabSetProperty "Container1" "Image1" "originY" "center"
fabSetProperty "Container1" "Image1" "angle" "[Deg]"
Refresh

Regards

#9 · August 20, 2019, 5:50 pm

Yes @ronnie, you are right.
Documenting all the plugin possibilities is a huge work when even the basic VisualNEO Web documentation is not complete.
Until now I have concentrated in adding as much functionalities as possible.
Thank you!
Best regards.

CDY@44 has reacted to this post.

#10 · August 24, 2019, 6:14 am

Hi @luishp,

Is there a GetActiveObject in the plugin, or something to that extent to retrieve the current 'active' object selected?

#11 · August 24, 2019, 10:35 am

Hi @ronnie,

Do you mean the name of the active object?
By default any command will be applied to the active object unless you specify the object's name.
The "active object" is always the one selected by the user.

Regards.

#12 · August 25, 2019, 6:26 am

Hi @luishp

As user might load many image or objects using different object name, i just need to know if the active object is "Image1". If active object = "Image1" then do nothing, else remove/delete.

#13 · August 25, 2019, 7:34 am

Hi @ronnie, just use this:

fabGetProperty "Container1" "" "name" [objectName]

[objectName] will store the currently active object name.
Regards.

#14 · August 25, 2019, 8:24 am

Hi @luishp

The event “name” doesn’t work frequently, or using your demo, clicking different object resulted in similar “Container1Object1” value. Sometimes it works, but at times it’s blank. When I added ‘jsalert “[ObjectName]’ the result is “undefined”

#15 · August 25, 2019, 10:11 am

Hi @ronnie,

Conditions for getting a name:
1) You should have assigned a name to the object previously (normally at creation time)
2) An object must be selected by the user so there is an active object.

In my demo I do not assign any name to the objects so they should have an automaticaly assigned name:
Container1Object1, Container1Object2, Container1Object3...

Load image and auto-scale - Forum

Load image and auto-scale