display array of images like a gallery grid

[alexmelo23]

Hi

I try to display an array of images like a gallery grid (See attached images)
any ideas on how can arrange images?

const files = [ "http://www.freeimageslive.com/galleries/home/playroom/pics/objects00016g.jpg", "http://www.bootleg-objects.com/download/re_sl_totale.jpg", "http://blogs.ukoln.ac.uk/cultural-heritage/files/2010/03/NIM_1983-99_23.jpg", "http://www.wallsave.com/wallpapers/1920x1080/newera/262606/newera-black-cap-new-york-city-monochrome-objects-ny-262606.jpg", "http://www.freeimageslive.com/galleries/objects/watch/pics/objects00242.jpg", "http://www.imageafter.com/dbase/images/objects_household/b13objects_household036.jpg", "http://www.freeimageslive.com/galleries/wallpaper/work/objects00018g_dt1024.jpg", "http://www.hdwallpaperstop.com/wp-content/uploads/2013/06/3D-Object-Dice-HD-Wallpaper.jpg", "http://www.imageafter.com/dbase/images/objects/b10objects019.jpg", "http://www.imageafter.com/dbase/images/objects_circuits/b16objects_circuits006.jpg", ]

files.map((el) => { fabric.Image.fromURL(el, function (myImg) { var imagesFile = myImg.set({ left: 0, top: 0, width: 300, height: 300 }); canvas.add(imagesFile); }); })

[asturur]

Is unclear what are you asking and what did you try and why it does not work.

[syarkhan]

You can use clipPaths for this.

1. Create 6 rectangles with same width and height and coords according to how you want the grid items positions
2. Load your images and set those images as clippaths to the rectangles one by one

You can set clippath like this:

gridItemRect.left = (-imageObj.width / 2);
gridItemRect.top = (-imageObj.height / 2);
gridItemRect.scaleToWidth(imageObj.width);
gridItemRect.setCoords();
imageObj.clipPath = gridItemRect;
canvas.renderAll();

You can also create a custom class of type Group to do this.