badge-js

A simple and lightweight JavaScript library to generate badges for your visitors.

Example How to use

Easy-to-use

badge-js is a full canvas wrapper. It provides multiple classes and methods for working without worrying HTML5 canvas logic

Automatic responsivity

You'll not have to recalculate and rebuild on screen size changes

Percentage-oriented unity

Every size, distance, position, will be expressed by a percentage of canvas height or width

Automatic export

A download link is automatically generated and associated to an anchor

This is a simple example


  Your name
  
  Your role
  
  Your image
  
  
  Download

const form = document.getElementById("badge-form");
  function generateBadge(e){
      // Prevent the form from submitting
      e.preventDefault();
  
      // Create a new badge
      const badge = new BadgeGenerator("badge-example", {
          exportHeight: 2048,
          exportWidth: 2048,
          exportName: "badge-example",
          downloadBtnId: "exportBtn"
      });
      
      // Add a background layer
      const backgroundLayer = new BadgeRectLayer({
          height: 100,
          width: 100,
          top: 0,
          left: 0,
          color: "blue"
      });
      badge.addLayer(backgroundLayer);
      
      // Add an image layer
      const img = new Image();
      img.src = URL.createObjectURL(form["photo"].files[0]);
      const imageLayer = new BadgeImageLayer(img.src, {
          width: 70,
          left: (h, w) => 50 - w/2,
          top: (h, w) => 50 - h/2,
      });
      badge.addLayer(imageLayer);
      
      // Add a text layer
      const nameLayer = new BadgeTextLayer(form["name"].value, "Trebuchet MS", {
          size: 10,
          color: "black",
          top: (h, w) => 5,
          left: (h, w) => 5,
      });
      badge.addLayer(nameLayer);
      
      // Add a text layer
      const titleLayer = new BadgeTextLayer(form["role"].value, "Trebuchet MS", {
          size: 10,
          color: "black",
          bottom: (h, w) => 5,
          right: (h, w) => 5,
      });
      badge.addLayer(titleLayer);
  }
  
  // Add an event listener to the form
  form.addEventListener("submit", generateBadge);

How to use ?

1 - Import badge-js library

2 - Add canvas and export button to your HTML


Download

3 - Create your badge

const badge = new BadgeGenerator("badge-example", {
    exportHeight: 2048,
    exportWidth: 2048,
    exportName: "badge-example",
    downloadBtnId: "exportBtn"
});

4 - Add Rectangle layer

const backgroundLayer = new BadgeRectLayer({
    height: 100,
    width: 100,
    top: 0,
    left: 0,
    color: "blue"
});
badge.addLayer(backgroundLayer);

5 - Add Text layer

const textLayer = new BadgeTextLayer("Hello world", "Trebuchet MS", {
    size: 10,
    color: "black",
    top: (h, w) => 5,
    left: (h, w) => 5,
});
badge.addLayer(textLayer);

6 - Add Image layer

const imageLayer = new BadgeImageLayer("image.png", {
    width: 70,
    left: (h, w) => 50 - w/2,
    top: (h, w) => 50 - h/2,
});
badge.addLayer(imageLayer);