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).
<script src="https://unpkg.com/@devadri/create-sticker@{{ version }}/bundle.iife.js"></script>npm install @devadri/create-sticker<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>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;
}{
"strokeWidth": 20,
"strokeColor": "white",
"padding": 1,
"fillHoles": true
}padding minimum values is 1.
Run the demo with the following commands:
npm run build
npm run demo
