Convert Images Into Stickers With JavaScript – Create-sticker

The create-sticker JavaScript library takes your images, specifically those with transparent backgrounds in .png, .webp, and .jpg formats, and applies a customizable sticker effect.

This means you can adjust the color and thickness of the sticker outline, decide whether to fill in any holes in the image, and even add padding around the image.

How it works:

Create-Sticker uses HTML Canvas to manipulate images. The main steps are:

1. Load the image onto a canvas.
2. Detect the image outline.
3. Apply the sticker effect (stroke, padding, etc.).
4. Fill holes if specified.
5. Return the modified image as a data URL.

How to use it:

1. Install & download.

# NPM
$ npm install @devadri/create-sticker

2. Import create-sticker into your project.

// ES Module
import { createSticker, CreateStickerOptions } from '@devadri/create-sticker';
// Browser
<script src="/path/to/bundle.iife.js"></script>

3. Apply a customizable sticker effect to your image. The code snippet shown below fetches the image source, defines the desired customization options, and then applies the sticker effect using the createSticker function. Finally, it updates the image source with the modified version.

// Browser
async function modifyImage(img) {
  const options = {
    // options here
  }
  const stickerImgSrc = await CreateSticker.createSticker(img.src, options);
  img.src = stickerImgSrc;
}

// ES Module
async function modifyImage(img) {
  const options: CreateStickerOptions = {
    // options here
  }
  const stickerImgSrc = await createSticker(img.src, options);
  img.src = stickerImgSrc;
}

4. Available options to customize the sticker effect.

{
  "strokeWidth": 20,
  "strokeColor": "white",
  "padding": 1,
  "fillHoles": true
}