ccapture.js
ccapture.js copied to clipboard
Export JPG/PNG as blob
I have a use case where I want to use CCapture to export the Canvas frames to use with an external AVI Encoder.
In order to do this most effectively, I'd like to export each Canvas frame as an individual file blob so that it can be passed directly to the encoder.
I'm about to embark on this work, so any thoughts on how this might work in the context of PR would be helpful to allow me to contribute it back.
You can follow the structure defined in CCFrameEncoder (https://github.com/spite/ccapture.js/blob/master/src/CCapture.js#L128) to build your own frame encoder.
Are you storing the frames in memory, sending them to a server...?
Thank you. I'll be storing them in memory as some kind of array of blobs. I was planning to pass this array of blobs to the AVI Encoder (a fork of this).
So all I really need to achieve is to obtain the array of blobs from the animation. This is trivial using canvas.toDataURL() & requestAnimationFrame, but doesn't come with the smooth animation timing advantages of CCapture.
I can think of two routes to adding this functionality:
-
Adding a new Encoder that allows access by the calling code to a blob from each captured frame. Ideally it could be configured to handle the blobs on a per frame basis at the time of capture (via callback or event emit) or access to all frames at the end of the capture via
capturer.save()where the data returned is an array of blobs. -
I did wonder if it might be possible to achieve this objective more simply by expecting the calling code to use
capturer.save(function(blob){ frames.push(blob) })after the every call tocapturer.capture()? I'm guessing the caller would have ensure that they extract only the last item from the array of blobs in this case.