skeletonization.js library
GPU-powered image skeletonization for the web.
Based on orginal C++ code by Zhang-Suen.
With GPU support from gpu.js.
Uses OpenCV.js.
Checkout the live demo at skeletonization-js.glitch.me.
Usage
In your HTML file:
<!-- Include OpenCV.js -->
<script src="https://docs.opencv.org/3.4/opencv.js"></script>
<!-- Include gpu.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gpu.js/1.10.4/gpu.min.js"></script>
<!-- Include skeletonization.js -->
<script src="https://skeletonization-js.glitch.me/skeletonization.js"></script>In your Javascript file:
// 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:
// 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);