vectorcam
v1.0.0
Published
Record gifs out of <svg> elements painlessly
Downloads
6
Readme
vectorcam
Record gifs out of
<svg>
elements painlessly
install
npm i vectorcam -S
limitations
- assumes
<svg>
element haswidth
andheight
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 manycam.snap
shots per second to make whilecam.recording
, defaults to4
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