Skip to content

liajoy/image-stroke

Repository files navigation

ImageStroke

Makes stroke for a image with transparent background.

Demo

Click here to see live demo.

Getting Started

Installing

yarn add image-stroke

How To Use

There are three built-in methods to make stroke. Choose one of them in different situations.

  • Rotate. Rotate the image with 360 degree.
  • Contour. Detects contours of the image by Marching Squares and get the paths, then stroke those paths.
  • Distance. Calculates the distance from each pixel to the edge of the image by Distance transform, and fills all pixels whose distance is less than the stroke width.
  • Rotate by WebGL. The same as 「Rotate」 but implements in WebGL.
import ImageStroke from 'image-stroke'

// Choose one of these methods
import rotate from 'image-stroke/lib/method-rotate'
import distance from 'image-stroke/lib/method-distance'
import contour from 'image-stroke/lib/method-contour'
import rotateByGL from 'image-stroke/lib/method-rotate-by-gl'

const imageStroke = new ImageStroke()

// Just use it
imageStroke.use(rotate)

const image = new Image();
image.onload = () => {
    // Get result
    const resultCanvas = imageStroke.make(image, {
        thickness: 10,
        color: 'red'
    })
}

About

Makes stroke for a image with transparent background.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published