Generate SVG Aruco Marker Images with JavaScript

aruco-marker is a JavaScript library that can generate marker images (fiducials) for the Aruco augmented reality marker library. Aruco codes can be recognized by the original Aruco C++ library, or in the browser by js-aruco. aruco-marker generates images as SVG, making them easy to scale to any size or print out. There is also a custom HTML element allowing you to easily embed codes anywhere on a page.

Demos

There are two demos that show off marker generation either directly or via the custom HTML element:

• Random Aruco markers via custom element (View Source)
• Random Aruco markers via string (View Source)

Usage

aruco-marker is available for use in the browser, or in NodeJS. It is installable as aruco-marker from NPM.

import { arucoToSVGString } from 'aruco-marker';

const svgImage = arucoToSVGString(155, '500px'); // the size is optional
document.getElementById('marker').innerHTML = svgImage;

See demos/index.html for a complete example.

Custom Element

aruco-marker is available for use in the browser, or in NodeJS. It is installable as aruco-marker from NPM.

<script src="https://unpkg.com/aruco-marker/element"></script>

<aruco-marker markerid="155" size="500px"></aruco-marker>

SVG to Canvas

While SVG images are very flexible and are perfect for most applications, you can use drawImage to draw an SVG image to an HTML Canvas in order to obtain an image data URL if you need a raster image.

Developing

First, install NodeJS however you like for your system (on macOS, I use brew install node).

Then check out and build the project:

git clone https://github.com/bhollis/aruco-marker
cd aruco-marker
npm ci
npm run demo

License

Copyright (c) 2014 Benjamin Hollis. MIT Licensed, see MIT-LICENSE.txt for details.