Nurturing Palpable Magnificence
    Wondering what’s next for npm?Check out our public roadmap! »

    @svg-drawing/img-trace
    TypeScript icon, indicating that this package has built-in type declarations

    4.2.1 • Public • Published

    @svg-drawing/img-trace

    npm version npm download

    Install

    npm

    yarn add @svg-drawing/img-trace
    # or
    # npm i @svg-drawing/img-trace

    How to use

    Example code is here

    Example of downloading the image converted to Svg

    import {
      ImgTrace
      ImgLoader,
    } from '@svg-drawing/img-trace'
    import { download } from '@svg-drawing/core'
    
    const svgDownload = async () => {
      new ImgLoader().fromUrl('./images/example.png', (imgd) => {
        const svg = new ImgTrace().load(imgd)
        download(svg)
      }
    }
    
    svgDownload()

    Example of rendering an image converted to Svg

    import { Renderer } from '@svg-drawing/core'
    import {
      ImgTrace
      ImgLoader,
    } from '@svg-drawing/img-trace'
    
    const handleImage = (imgd) => {
      const svg = new ImgTrace().load(imgd)
      const renderer = new Renderer(document.getElementById('render-area'))
      renderer.update(svg.toJson())
    }
    
    new ImgLoader().fromUrl('./images/example.png', handleImage)

    Example of get colors palettes.

    import {
      ImgTrace
      ImgLoader,
      Palette
    } from '@svg-drawing/img-trace'
    import { download } from '@svg-drawing/core'
    
    // imgd is new ImageData()
    const colorSvgDownload = () => {
      new ImgLoader().fromUrl('./images/example.png', (imgd) => {
        // extracting colors from an image.
        const palette = Palette.imageData(imgd, {
          numberOfColors: 8 // The default value. If it is 8 or less, the value is gray scale.
        })
        // const palette = Palette.number(8) // Extracts the color evenly by the number passed
        // const palette = Palette.grey(8) // Grey scale palettes.
        
        const svg = new ImgTrace({ palettes }).load(imgd)
        download(svg)
      })
    }
    
    colorSvgDownload()

    Thanks

    https://github.com/jankovicsandras/imagetracerjs

    Install

    npm i @svg-drawing/img-trace

    DownloadsWeekly Downloads

    8

    Version

    4.2.1

    License

    MIT

    Unpacked Size

    262 kB

    Total Files

    20

    Last publish

    Collaborators

    • avatar