Cannot Scale Background Image to Canvas Dimensions

[johnny-longneck]

Hey,

thanks again for integrating FabricBackground.
I am struggling hard to scale the image to the given Canvas Size

<FabricCanvas :height="500" :width="500" :ref="'canvas'+index">
              <fabric-background :ref="'background'+index" :url="view.image" :width="500" :height="500" :scaleX="1" :scaleY="1"></fabric-background>
</FabricCanvas>

If the image itself is 1000x1000 px for example, I only see the top left quarter of the image.
Can you help?

Normally it would be achieved by scaleX: canvas.width / img.width
But I could not access the image width here.

[bensladden]

Ive added the event @image-loaded to the most recent release for each type of image from url component.
From this you can now access the img width etc.
v0.3.70

`
<fabric-background-image
:id="345667"
:scaleX="400 / imgWidth"
:scaleY="400 / imgHeight"
@image-loaded="imageLoaded"
>

...

imageLoaded(img) {
  this.imgHeight = img.height;
  this.imgWidth = img.width;
},`

assuming 400 is the width and height etc

[johnny-longneck]

Hello, thanks for your quick answer.

It is getting close. The only problem left now, is that the background of the canvas is only updating its scaling, when I touch an element in the canvas, and force a rerender.
I tried it in the imageLoaded function with

this.$refs.canvas0[0].requestRenderAll()

But it is not working here. It is working on other parts of the code, tough

[johnny-longneck]

Okay I got it working, I first had a mindfuck but doint it exactly as you wrote worked.
Thanks a lot!