Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lingdong-/skeletonization-js
Javascript implementation of image skeletonization
https://github.com/lingdong-/skeletonization-js
gpu image-processing opencv opencvjs skeletonization webgl
Last synced: about 6 hours ago
JSON representation
Javascript implementation of image skeletonization
- Host: GitHub
- URL: https://github.com/lingdong-/skeletonization-js
- Owner: LingDong-
- Created: 2019-02-18T06:49:00.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2019-02-18T06:49:48.000Z (almost 6 years ago)
- Last Synced: 2024-10-30T20:53:59.089Z (19 days ago)
- Topics: gpu, image-processing, opencv, opencvjs, skeletonization, webgl
- Language: JavaScript
- Size: 7.81 KB
- Stars: 42
- Watchers: 6
- Forks: 8
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
skeletonization.js library
=================
GPU-powered image [skeletonization](https://en.wikipedia.org/wiki/Topological_skeleton) for the web.
Based on [orginal C++ code by Zhang-Suen](https://web.archive.org/web/20130313084711/http://opencv-code.com/quick-tips/implementation-of-thinning-algorithm-in-opencv/).
With GPU support from [gpu.js](https://gpu.rocks/).
Uses [OpenCV.js](https://docs.opencv.org/3.4/d5/d10/tutorial_js_root.html).
Checkout the live demo at [skeletonization-js.glitch.me](https://skeletonization-js.glitch.me).
## Usage
In your HTML file:
```html
```
In your Javascript file:
```javascript
// Usage with HTML Canvas:
// setup skeletonization:
skeletonization.setup(
256, // output width
256 // output height
);
// skeletonize a canvas element specified by its id:
skeletonization.skeletonize("inputCanvasId", {
preprocess: true, // whether or not to preprocess the
// source image (blur, threshold, etc.)
blur: 5, // if preprocess, radius of blurring to apply
threshold: 128, // if preprocess, binary threshold to apply
invert: false, // if preprocess, invert the image (foreground
// should be white, background should be black)
outputCanvasId: "outputCanvasId", // id of canvas on which output
// will be displayed
bbox: [0,0,256,256], // bounding box (xmin,ymin,xmax,ymax) of
// the region to apply skeletonization,
// leave undefined to apply to whole image
})
```
You can also skeletonize `cv::Mat`, e.g. in an OpenCV.js project:
```javascript
// Usage with OpenCV.js:
// setup skeletonization
skeletonization.setup(
256, // output width
256 // output height
);
// read the image with OpenCV.js
var im = cv.imread("inputCanvasId");
// ... (custom preprocessing)
// skeletonize the cv::Mat
// skeletonize modifies the input cv::Mat,
// so save a copy if you still need the original
skeletonization.skeletonize(im, {
preprocess: true, // whether or not to preprocess the
// source image (blur, threshold, etc.)
blur: 5, // if preprocess, radius of blurring to apply
threshold: 128, // if preprocess, binary threshold to apply
invert: false, // if preprocess, invert the image (foreground
// should be white, background should be black)
bbox: [0,0,256,256], // bounding box (xmin,ymin,xmax,ymax) of
// the region to apply skeletonization,
// leave undefined to apply to whole image
})
// ... (custom postprocessing)
// display the result
cv.imshow("outputCanvasId",im);
```