aruco-marker - GitLite

KO | EN

gitlite — search

#javascript #hacktoberfest #typescript #golang #android #deep-learning #docker #macos #java #windows #awesome-list #mcp #ios #openai

aruco-marker

(★ 53)

JavaScript library and custom HTML element for generating Aruco marker images

File Explorer

Download Latest Version (.zip)

- - pr-build.yml
- settings.json
- 404.html
- demo-server.js
- element.html
- index.html
- aruco-marker.cjs
- aruco-marker.cjs.map
- aruco-marker.d.ts
- aruco-marker.modern.js
- aruco-marker.modern.js.map
- aruco-marker.module.js
- aruco-marker.module.js.map
- aruco-marker.test.d.ts
- aruco-marker.umd.js
- aruco-marker.umd.js.map
- element.cjs
- element.cjs.map
- element.d.ts
- element.modern.js
- element.modern.js.map
- element.module.js
- element.module.js.map
- element.umd.js
- element.umd.js.map
- aruco-marker.test.ts
- aruco-marker.ts
- element.ts
.eslintrc
.gitignore
.npmignore
.prettierrc
CHANGELOG.md
Gruntfile.js
MIT-LICENSE.txt
package-lock.json
package.json
README.md
tsconfig.json

# Installation Guide

1. Get the code

git clone https://github.com/bhollis/aruco-marker

Downloads the entire project code from GitHub to your computer.

cd aruco-marker

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm ci

Type this command into your terminal and run it.

npm run demo

Type this command into your terminal and run it.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Generate SVG Aruco Marker Images with JavaScript

`aruco-marker` is a JavaScript library that can generate marker images (fiducials) for the [Aruco](https://github.com/paroj/aruco) augmented reality marker library. Aruco codes can be recognized by the original Aruco C++ library, or in the browser by [js-aruco](https://github.com/jcmellado/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.

[![NPM version](https://badge.fury.io/js/aruco-marker.svg)](https://www.npmjs.com/package/aruco-marker)

# Demos

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

- [Random Aruco markers via custom element](http://bhollis.github.io/aruco-marker/demos/element.html) ([View Source](https://github.com/bhollis/aruco-marker/blob/master/demos/element.html))
- [Random Aruco markers via string](http://bhollis.github.io/aruco-marker/demos/index.html) ([View Source](https://github.com/bhollis/aruco-marker/blob/master/demos/index.html))

# Usage

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

```javascript
import { arucoToSVGString } from 'aruco-marker';

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

See [`demos/index.html`](https://github.com/bhollis/aruco-marker/blob/master/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.

```html
<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](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/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:

```bash
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](https://github.com/bhollis/aruco-marker/blob/master/MIT-LICENSE.txt) for details.