ccapture.js icon indicating copy to clipboard operation
ccapture.js copied to clipboard

Export JPG/PNG as blob

Open nijk opened this issue 8 years ago • 2 comments

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.

nijk avatar Apr 21 '17 09:04 nijk

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...?

spite avatar Apr 21 '17 09:04 spite

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:

  1. 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.

  2. 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 to capturer.capture()? I'm guessing the caller would have ensure that they extract only the last item from the array of blobs in this case.

nijk avatar Apr 21 '17 09:04 nijk