merge-images | Easily compose images | Computer Vision library

I need a simple way to create larger images from tiles. I found merge-images library here (merge-images) and on safari it displays images but not placed correctly. on chrome I just get error about a tainted canvases. If anyone can suggest solutions I would much appreciate it.

Looking to automate merging images into a specified grid-like format using code.

Open to different programming languages as I haven't found a great solution yet.

The options I have found so far includes:

1. https://www.npmjs.com/package/merge-images and writing a node.js script.
2. Using ImageMagick Montage and writing a bash script.

But I'm looking for something I could use with minimal modifications.

Below is what I'm looking to output as an image.

I've got a 16x512 image comprised of 16x16 images. I want to seperate them, individually scale each one down to 16x8, then put them all back into their full 16x512. I've got a basic idea, but I'm having trouble executing it.

Using the commands from unix stackexchange, I split by file by using convert -crop 16x16 my_image.png crop-%d.png, which yields 32 images (512 / 16 == 32). My next step was where trouble has started. From askubuntu, I found the command mogrify -resize 16x8 crop-*.png, however this does not yield 16x8 images, but rather 8x8, which I do not want. Furthermore, this post on stackoverflow gives me the command for merging these images, which is convert crop-*.png -append my_image_cropped.png, however it does not yield a 16x512 like I want, but rather 8x256 (the 8 is due to the previous bug, but I still want a height of 512, not 256).

What do I need to accomplish my goals? The image in question can be found on imgur.

Edit: Here are some images which will describe the basic idea

The full image:

Both 16x16 and 16x8 side by side

The finalized image, basically the 16x8 will sit in the 16x16 area (right at the bottom part, that is essential), but won't fully fill it.

I am creating a website in which each user has an "avatar". An avatar has different accessories like hats, facial expressions, etc. I have made this previously on a php website but I am using react to create this new website. I am loading in each users avatar and its item links from firestore. I do not want to use absolute positioning or css, I want the avatar to be one image.

Example of what I am trying to achieve:

I found this library: https://github.com/lukechilds/merge-images which seems to be exactly what I need but I cannot load in external images or I get this error:

Any solutions to this error or suggestions to an alternative would be greatly appreciated.

My code:

In reference to my previous question FFMpeg: merge images with audio for specific duration I have successfully merged few images with audio for specific duration by using following command.