CODEWITHSUNDEEP
htmlsvgfabricjs
user3514328
user3514328

Reputation: 109

Issue while loading big images inside svg on FabricJs

We are using a FabricJS editor and we are loading SVG templates into it. We are also editing some texts, changing positions of objects and saving as SVG. Everything works fine here.

But now we need to load very big images inside one SVG. Each images in the SVG is going to be high resolution as this is used for print industry. Here we are not able to load that SVGs as the embedded images are very bigger.

We thought of a solution of re-sizing those images before loading to editor and after editing bringing back the original images as output. But this also does not work out as when we resize, we are facing some issue with positioning of objects in the SVG

Can someone suggest a way to fix this issue

Upvotes: 0

Views: 598

Answers (1)

Kavan Pancholi
Kavan Pancholi

Reputation: 602

I have also been using fabric.js for the same reason as yours. As the issue of positioning image while showing on the canvas. You can position it like this.

$('#canvas').attr('width',img_data.width).attr('height',img_data.height);
var canvas = new fabric.Canvas('canvas');
var imgElement = document.getElementById('myimg');
var CanImg = new fabric.Image(imgElement, {
    left: -1 * img_data.x,
    top : -1 * img_data.y,
});
CanImg.selectable = false;
canvas.add(CanImg);

Using Left and top you can set position of x and y co-ordinates of the image. It will work on the large image too. You might get stuck at showing large image on canvas. But as far as the issue of positioning image, this will work.

Good Luck.

Upvotes: 2

Related Questions