JS-CardRendering is a javascript library used to render card printing templates. For node.js and web browsers.

Related projects using js-cardrendering:

• js-cardeditor: a web editor for card printing template
• card-printing-worker: a node server providing REST API for bitmap generation/printing
• leosac-credential-provisioning: a complete professional card provisioning solution for both card encoding and printing

const tpl = {
  background: {
    color: '#ff0000'
  },
  fields: [
    {
      type: 'label',
      autoSize: true,
      color: '#000000',
      value: 'My first card',
      width: 46,
      height: 18,
      x: 80,
      y: 50
    },
    {
      type: 'qrcode',
      value: 'https://www.leosac.com',
      width: 132,
      height: 132,
      x: 250,
      y: 100,
    }
  ]
};

npm install @leosac/cardrendering --save

PIXI.js is required. It is a peer dependency because of the differents versions available depending of your targeted environment. Use npm install pixi.js --save or npm install @pixi/node --save.

import { createCanvas } from "canvas";
import { CardRenderer } from "@leosac/cardrendering";

const renderer = new CardRenderer({
  canvas: createCanvas(445, 280),
  grid: {
    ruler: true
  }
});
renderer.createCardStage({size: 'cr80', orientation: 'landscape'}, tpl);
renderer.animate();

<script type="text/javascript" src="cardrendering.js" />
<canvas id="card"></canvas>

const renderer = new cardrendering.CardRenderer({
  canvas: document.getElementById('card'),
  grid: {
    ruler: true
  }
});
renderer.createCardStage({size: 'cr80', orientation: 'landscape'}, tpl);
renderer.animate();

git clone https://github.com/leosac/js-cardrendering.git
cd "js-cardrendering"
npm install

npm run build

npm run test

The canvas where to render the template.

Grid/View settings

{
  ruler: false
}

Set to true to enable onCard* events.

Event triggered on card click down.

Event triggered on card click up.

Event triggered on card mouse move.

Event triggered on a field drag start.

Event triggered on a field drag end.

Event triggered on a field drag move.

Event triggered on selected sprite creation.

Event triggered on new field addition.

Event triggered on field selection change.

Event triggered on template content change.

Event triggered on error.

The card layout size.

• cr80 : Standard CR-80 card size
• cr79 : CR-79 card size
• cr100 : CR-100 ID card size
• res_4to3 : 4/3 visual
• res_3to2 : 3/2 visual
• res_8to5 : 8/5 visual
• res_5to3 : 5/3 visual
• res_16to9 : 16/9 visual
• custom : Use custom size

The layout orientation.

• landscape
• portrait

The template to render.

Resize based on the parent container. If the layout size exceed the container size, then rulers are forced as disabled and the view scaled.

This project has been created by Leosac SAS. The source code of this library is released under LGPLv3 license.