vectorcam v1.0.0

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. It can be whatever gifshot accepts.

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.

license

MIT