Graph-mark NPM

Mark the face frame in image and get the corresponding coordinates. This lib is dependent on fabric.js.

Install

npm install fabric -S
npm install graph-mark -S

Quick Start

import { fabric } from 'fabric'
import { Mark } from 'graph-mark'

let mark = new Mark({ canvasTagId: 'c', maxResultsLength: 1 })
mark.init(imgElement)

Default options

defaultOptions = {
    canvasTagId: null,
    maxResultsLength: 1000000
  }

canvasTagId: Canvas tag id.
maxResultsLength: The number of rectangular box that can exist at the same time. default: 1000000

Examples of use

cdns

<!doctype html>
<html lang="en">
<head>
    <title>cdn example of use</title>
    <script src="./fabric.js"></script>
    <script src="../lib/graph-mark.js"></script>
</head>
<body>
<img src="100x100x5.jpg" id="image1" style="display: none;">
<img src="avatar.jpg" id="image2" style="display: none;">
<canvas id="c" width="550" height="550"
        style="margin-left: 20px; position: absolute; left: 20px; top: 20px; touch-action: none; user-select: none;border: 1px solid #333;"
        class="lower-canvas"></canvas>
</body>
</html>
<script>
  var mark = new GraphMark.Mark({canvasTagId: 'c', maxResultsLength: 1});
  var imgElement = document.getElementById('image1');
  mark.init(imgElement);
</script>

You can test it on this demo.

mark canvas fabric rect

@infinitebrahmanuniverse/nolb-graph-@everything-registry/sub-chunk-1783

1.0.1

5 years ago

1.0.0

5 years ago