markus-wa / stickerify

Add sticker-like border effect to transparent images (JavaScript / TypeScript)

stickerify

Add sticker-like border effect to images with transparency

Input:

Output:

Live Demo

Check out this codepen demo: https://codepen.io/markus-wa/pen/eYEMvxd - thanks to @pento for letting me steal this!

Install

yarn add stickerify

or

npm install stickerify

Sample code

Stickerify can run in a web browser, or in a Node.js environment. For Node.js, you should use the canvas module for image loading, as this is what Stickerify uses internally for image processing.

HTML

<img id="out" />

const img = new Image(),
	out = document.getElementById('out');

img.crossOrigin = 'anonymous';
img.onload = () => {
	out.src = stickerify(img, 3, 'white').toDataURL();
};
img.src = 'https://raw.githubusercontent.com/markus-wa/stickerify/main/example/input.png';

When run in the browser, stickerify() returns a HTML5 canvas element.

Node.js

const { stickerify } = require('stickerify');
const { loadImage } = require('canvas');
const { writeFile } = require('fs');

loadImage('https://raw.githubusercontent.com/markus-wa/stickerify/main/example/input.png')
	.then((image) => stickerify(image, 3, 'white'))
	.then((image) => stickerify(image, 1, 'grey'))
	.then((canvas) => writeFile('output.png', canvas.toBuffer(), (err) => console.log(err || 'done')));

When run in Node.js, stickerify() returns a Canvas object.