TypeScript Poster Art with Jimp

Many years ago I wanted an easy and cheap way to print poster sized pictures without paying a premium at the local pharmacy. I thought if I could slice up a single picture into multiple 4x6 sized photos, I could just send the batch in for printing, and piece them together on a larger poster board at home. I also wouldn’t have to worry about wrinkling up the poster, I could just shove all of the pictures in my pocket.

At the time, 3 megapixel cameras were all the rage, and Java was still new and exciting. I processed a couple of photographs, put them in frames, and enjoyed them for years. Even with the low resolution and blowing them up to a larger size, the effect of assembling a larger picture from several smaller ones made them all a piece of art.

So, now on vacation, I wanted to process some more photographs. I had no idea where that program went, and it’s probably several generations of laptops lost. I thought it has to be easier with all of the new libraries out there, and indeed it was. It will probably take me longer to write this article than to use the JavaScript image processing library Jimp. I followed their TypeScript instructions, and had something together in no time. (https://www.npmjs.com/package/jimp). I thought I would share my sample program, in case anyone wants to have some TypeScript fun, or is looking for an example on using Jimp with TypeScript.

Getting Started

In order to run the example, you will need Node.js and TypeScript installed. Then navigate over to github to download the source here: https://github.com/drewword/jimp-poster

Next, transpile the TypeScript with tsc, and execute the program with an example below:

node poster.js ./boat.jpg 6

The first parameter is the image your want split into multiple pieces, the next is the number of images to produce in the horizontal axis. The default is to produce 4x6 photos. In the above example, 6 photos would be produced making the overall width 36 inches.

The final row of images may be cutoff if the overall image is not the exact dimensions of 4x6. Please feel free to make plenty of modifications to the original source, if there is a better way to produce the overall image, please branch the original source.

The Code

The main section that performs all of the work is a simple nested loop. The interesting parts of Jimp usage are the creation of a new temporary image, and the blitting of a section of the original image to the temporary image.

The final steps are to make the image section larger to ensure it’s friendly for drugstore printing, and to write the image out to disk.

You should see output similar to below after you run an image through:

Image to process: ./boat.jpg
Horizontal count of images: 6
processing image ...
Number of total images: 30

Next simply upload everything to your drugstore of choice, pick them up and assemble the stack of photos to your medium of choice. I may take a future version to the web as a client side only poster-maker.

I hope you enjoy.