Load image and auto-scale - Forum

Load image and auto-scale

Ronnie(@ronnie)

61 Posts

August 18, 2019, 7:42 am

Quote from Ronnie on 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.

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

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.

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.

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/

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..."

@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..."

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...

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. 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.

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.

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.

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.

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”

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”