BadgeGenerator is a JavaScript library that allows you to dynamically generate badges using an HTML5 canvas.
Simply add the file to your project and import it into your HTML page:
<script src="badge-generator.js"></script>
const { BadgeGenerator, BadgeLayer, BadgeTextLayer, BadgeImageLayer, BadgeRectLayer } = require('./badge-generator');
import { BadgeGenerator, BadgeLayer, BadgeTextLayer, BadgeImageLayer, BadgeRectLayer } from './badge-generator.js';
const badge = new BadgeGenerator("canvasId", {
downloadBtnId: "downloadButton",
exportHeight: 2048,
exportWidth: 2048
});
const textLayer = new BadgeTextLayer("My Text", "Arial", {
left: (h, w) => 10,
top: (h, w) => 20,
color: "black",
size: 20
});
badge.addLayer(textLayer);
const imageLayer = new BadgeImageLayer("image.png", {
left: 10,
top: 10,
width: 50,
height: 50
});
badge.addLayer(imageLayer);
const rectLayer = new BadgeRectLayer({
left: 10,
top: 50,
width: 50,
height: 20,
color: "red"
});
badge.addLayer(rectLayer);
badge.getDownloadURL().then(url => {
console.log("Image URL:", url);
});
badge.refreshSize();
badge.draw();
This project is licensed under the MIT License. Feel free to use and modify it as you wish! 🎨