@devadri/create-sticker

Library that adds a sticker effect to images with transparent backgrounds.

This code was made thanks to this Stack Overflow answer made by the user markE.

Tested with .png, .webp and .jpg.

Customize: stroke color, stroke thickness, fill holes and image padding.

It uses HTML Canvas, so it only works in the browser (and not in Node.js).

Install

Browser

<script src="https://unpkg.com/@devadri/create-sticker@{{ version }}/bundle.iife.js"></script>

npm

npm install @devadri/create-sticker

Usage

Browser

<script src="https://unpkg.com/@devadri/create-sticker@1.1.0/dist/bundle.iife.js"></script>
<script>
  async function modifyImage(img) {
    const options = {
      strokeWidth: 20,
      strokeColor: "black",
      padding: 20,
      fillHoles: true
    }
    const stickerImgSrc = await CreateSticker.createSticker(img.src, options);
    img.src = stickerImgSrc;
  }
</script>

ESM / TypeScript

import { createSticker, CreateStickerOptions } from '@devadri/create-sticker';

async function modifyImage(img) {
  const options: CreateStickerOptions = {
    strokeWidth: 20,
    strokeColor: "black",
    padding: 20,
    fillHoles: true
  }
  const stickerImgSrc = await createSticker(img.src, options);
  img.src = stickerImgSrc;
}

Default options

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

padding minimum values is 1.

Demo

Run the demo with the following commands:

npm run build
npm run demo

Screenshots

License

Unlicense license