Image setSrc, setElement and width/height value

[scriptspry]

Version

2.0.1

Test Case

Tried to load the same image with exact same code and got different outputs.

v1.7.22 - Code - Output

v2.0.1 - Code - Output

Expected Behavior

Expected the full image to be rendered.

Actual Behavior

Only got 1/4th? of the image rendered.

---

First off, I do have a "working" solution for even v2.0.1 here. But, it is a hack. Also, I have already gone through the v1 to v2 breaking changes documents, and read and understood the parts about fabric.Image and fabric.Image.fromObject.

Now, I have already spent a couple of hours of time on this, and came to a conclusion that library is misbehaving. Here's why:

1. width = 128 & scaleX = 1 !== width = 256 & scaleX = 0.5 !!!

If the width and scaleX semantics for other shapes: rect, circle etc are rendering same output for both cases. Why does Image behave differently? Is it not an inconsistency with interpretation of what width and scaleX values are?

2. We can almost never have scaleX as 1 for fabric.Image instances, except when image's width, height match fabric.Image object's width height.

This feels like a painful and limiting enforcement.

[asturur]

The situation is what is stated in the docs.
If you need a picture, big 512px to display in 128px, use scaleToWidth(128). That was the correct procedure also on 1.7

I do not see the inconsistency. Can you be more clear?

[scriptspry]

The width and scaleX semantics for fabric.Image have changed in v2.

In v1:

Load an image of size 256, 256
Image has width 256, height 256, scaleX 1 scaleY 1
Image.scaleToWidth(128) now image has width 256, height 256, scaleX 0.5, scaleY 0.5
Now, Image.set({ width: 128, scaleX: 1, height: 128, scaleX: 1 })
And Image width is 128, scaleX 1, height is 128, scaleY 1 and full image is rendered after downscaling to 128x128.

In v2,

The last step failed.

---

I am starting to believe this may be a wrong expectation from my end. fabric is just using width and scaleX differently for fabric.Image.

It is no longer possible to stretch fit an image into fabric.Image with out knowing what the loaded image's naturalWidth and naturalHeight are.

It's only possible to set image size to desired size by doing something like this:

let img = i.getElement();

if (img && img.naturalWidth !== 0 && img.naturalHeight !== 0) {
	i.set({
		width: img.naturalWidth,
		height: img.naturalHeight,
		scaleX: desiredWidth / img.naturalWidth,
		scaleY: desiredHeight / img.naturalHeight
	});
}

That's the core of what triggered my problem. A fabric.Image's width scaleX is depending on loaded image's dimensions. If for any reason images referred in canvas change dimension, all the canvas jsons referring to this image need to be migrated.

[asturur]

So on your end loading the image as empty and then setting the src, is complocating things. Probably setSrc should reset wodth/height bit this would wipe crop information.

[asturur]

Taking an image and doing set Src or swapping the element to draw, is something that generally is part of a custom logic. Maybe setSrc should also reset the image width and height to the one available for the image.

[asturur]

Let's change title and keep.open for discussion.

[scriptspry]

@asturur After a little more lingering I found discussion about my exact problem at #4235 from last year.

Seems like @ozooner had already fixed this in their branch.

Here's the updated fiddle that works with the forked v2 fabric build found in fiddle referenced in the comment.

It would be great to get the fix into the library. Image asset size should not effect (de)serialisation IMO.

EDIT: updated fiddle link.

[asturur]

So the deserialization from 1.7 is incompatible with 2.0, so the major version bump.
I posted a guide to restore images from pre 2.0

Here the problem is if a setSrc, should also fix width/height to full image or not.

[salomonsanz]

I agree with @scriptspry i have the same problem migrating from 1 to 2 fabric version.
In my fabric app, in order to optimize the users bandwidth and load speed, when user scales up an image, i recalculate the src to get a bigger one with more quality, but when i make the "setSrc" with the new image quality, fabric "crops" the new image. In v1 this works ok.

[asturur]

definitely setSrc should reset width/height information and set cropX, cropY to 0.