My team does a holiday card promotion each year, which gives us a chance to create something unusual. This year we decided on a “create your own holiday card” image editor idea. We’d specify a couple of backgrounds and design a bunch of “sticker” graphics, then users could arrange these how they liked and print off a foldable card. Give it a try!

For this project, I created stickerbomb, a one-command in-browser basic graphics editor. It allows you to specify backgrounds and load in as many stickers as you’d like, categorized into drawers. Users can then position and manipulate the stickers however they like. When finished, they can either print it, save it, or share a URL that causes stickerbomb to reconstuct their image.

Demo

Give it a shot by designing your own smug tech conference laptop:

Example

The show above would be created like this:

stickerbomb({
    target: '#target',
    backdrops: [ 'images/laptop.jpg' ],
    stickers: {
        'Stickers': [
            {
                name: 'Angular',
                src: 'images/angular.png',
                widthPercentage: 15
            },

            ...

            {
                name: 'WordPress',
                src: 'images/wordpress.png',
                widthPercentage: 15
            }
        ],
        'Accessories': [
            {
                name: 'Bag',
                src: 'images/bag.png',
                widthPercentage: 60
            },

            ...

            {
                name: 'Tattoo',
                src: 'images/tattoo.png',
                widthPercentage: 30
            }
        ]
    }
});

Very easy! All other options can be found on the Github page.

How it works

Stickerbomb is an HTML5 canvas library. It’s plain JS that forms a number of DOM elements as controls around a canvas where it’s watching for mouse and touch movements. Whenever an event occurs on the canvas, it checks whether the selected tool should be instantaneous or work with dragging, and then, if dragging, records the position (relative to the canvas) and angle (relative to the sticker) of the start point and current point. The position information is gathered by the tool, which then uses whatever is applicable to manipulate the layers.

Rather than grant full control over positioning, it works on whole percentages. A sticker can be 15% wide, 28% from the left, and 50% from the top, for example. Movement and changes only happen on the whole numbers. This has the twofold benefit of significantly reducing the cost of the rendering loop (as each layer from the background up must be recalculated and redrawn in order on any change to the image) and allowing for very easy reconstruction of any created image. A basic notation of the information above would be w15l28t50, for example. That makes share URLs quite simple, fully client side, and small enough to pack more stickers than you’ll ever need into a URL before length limits become an issue (something like 800).

Printing and the future

One bit of weirdness in the library is its print function. For that it does a hidden, reconstructed rendering of your image in higher resolution, opens a new window with just that image at 100% width and flipped upside down, and then opens a print dialog–which was a proper pain to get working cross-browser. Assuming the aspect ratio is 1.55 this makes for a ready-to-fold card, which was the original goal. It’s not exactly what you’d expect to happen, though, so that may be branched out as its own tool separate from “print” if any future development is done on this.

The likely outcome is that this won’t be significantly developed further, but will result in a few good basic tutorial posts. How to tell if a click landed inside the boundaries of a rotated object, maybe.