🎥 Record gifs out of <svg> elements painlessly
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
.editorconfig
.gitignore
license
package.json
readme.markdown
vectorcam.js

readme.markdown

vectorcam

Record gifs out of <svg> elements painlessly

install

npm i vectorcam -S

limitations

  • assumes <svg> element has width and height attributes
  • uses gifshot, which uses black for transparency (#40)
  • super slow, use wisely
  • mega slow, defaults to 4 fps and it still takes a long time to generate short gifs
  • css styles applied via classes are lost unless they're listed below
    • background-color
    • color
    • dominant-baseline
    • fill
    • font-family
    • font-size
    • opacity
    • r
    • stroke
    • stroke-dasharray
    • stroke-width
    • text-anchor
  • seriously, it's sooooo slow!

glitter

  • completely in-browser
  • you just provide the <svg> element
  • you get a base64 image blob back
  • rich programmatic api

usage

Here's an example usage where we select an <svg> element, record whatever is rendered on it for two seconds, and then print it out to an image tag as a gif.

var svg = document.querySelector('svg')
var cam = vectorcam(svg)

cam.start()
setTimeout(function () {
  cam.stop(function (err, data) {
    if (err) {
      throw err
    }
    var image = document.createElement('img')
    image.src = data
    document.body.appendChild(image)
  })
}, 2000)

options

You can pass in an options object to vectorcam(svg, options?). Here's the list of options.

  • fps how many cam.snap shots per second to make while cam.recording, defaults to 4

cam.start()

Starts recording. Returns cam.

cam.pause()

Pauses recording. Returns cam. Make your own svg-based Vine web-app!

cam.resume()

Resumes recording. Returns cam.

cam.reset()

Stops recording. Removes all frames. Returns cam.

cam.add(frame)

Adds a frame. It can be whatever gifshot accepts.

cam.snap()

Adds a frame taken from the <svg> element.

cam.stop(done?)

Stops recording. Creates a gif through gifshot and eventually invokes done(err, image). The err may be missing, the image is a base64 encoded image blob. Returns cam.

cam.frames

Returns a read-only view into the recorded frames.

cam.recording

Returns a read-only view into whether the camera is "on" -- recording frames automatically with cam.snap at a fps/second speed.

demo

See bevacqua.github.io/promisees for a live demo. You click on the video camera icon and then it generates a gif using vectorcam.

example gif

promisees visualization using vectorcam

license

MIT