ruyili/image-splitter

Splits images into square tiles.

Image Splitter

A tool to split an image into square tiles. Supports gifs.

Upload an image, and it will save the square tiles into a zip file. If there are more than 50 tiles, it will separate them into different folders.

You can adjust the size of the square tiles, the prefix of the image files, and the delay in milliseconds between the frames of the gif (if applicable).

Examples

Still Image:

Animated Gif:

Libraries Used

A big thanks to the creators of these libraries for their work. Without them, this project would not have been possible.

• FileSaver by eligrey: https://github.com/eligrey/FileSaver.js/
• gif.js by jnordberg: https://jnordberg.github.io/gif.js/
• JSZip by Stuk: https://stuk.github.io/jszip/
• gif-frames by benwiley4000: https://github.com/benwiley4000/gif-frames

image-splitter's Issues

Fix for low FPS issue

Frame delay value needs to be 20ms minimum (jnordberg/gif.js#116).

Flickering, grey frames and low FPS when encoding gifs

When attempting to split certain gifs, some flickering grey pixels will appear on most of the frames. Additionally, the delay option to set the delay in milliseconds between consecutive frames does not work.

Steps to reproduce:

1. Upload this gif:
   
2. Change the delay option to 10 milliseconds.
3. Click the split button.

Expected behavior:

1. The roduced gif looks exactly the same as the decoded gif.
2. The delay between each frame is 10 milliseconds.

What actually happens:

1. The produced gif is covered in grey pixels.
   
2. The delay between each frame is much longer than 10 milliseconds.

Notes:

• The "grey" color is #36393F, the same as Discord's background. This value is set as the filler background for gifs that have sizes that cannot be split perfectly into square tiles, so perhaps it is more accurate to say that "most of the pixels in the gif's frames are not rendering".

Ability to paste image from clipboard

Directly paste images instead of uploading them

gif preview/output issue

https://gyazo.com/55e1a3defd9a4636b7b3f1f64142f648

forgot to clear canvas?

Gif background is not transparent

I was trying to make a typing indicator using 3 emojis. I uploaded a wide, 768 × 256 transparent gif. Here's what it looks like:

It gets split into 3 perfectly. However, it added a gray background.

Is there any way to keep the transparency? Here's my settings:

Btw, thanks for making this! Comes in handy pretty often.

[ENHANCEMENT] cut into equal widths

So if I have an odd width gif, lets say 330px wide, let me cut it into 3 106px wide pieces instead of having 6 different pieces, if that makes any sense?