Source to robosho.es
roboshoes / canvas-recorder Goto Github PK
View Code? Open in Web Editor NEWTool to record animations made in canvas or webgl
License: MIT License
Tool to record animations made in canvas or webgl
License: MIT License
Source to robosho.es
Allowing an option on bootstrap()
on stopping and clearing previous loop would prevent autoreloads from failing.
Proposal: bootstrap( { clear: true } )
.
This issue only exists if your tsconfig.json
does not include skipLibCheck
enabled, so it was easy enough to bypass, but I ran into these two errors:
ERROR in /Users/kylephillips/Dropbox/dev/sketches/grid2d-subdiv-three/node_modules/canvas-recorder/index.d.ts
ERROR in /Users/kylephillips/Dropbox/dev/sketches/grid2d-subdiv-three/node_modules/canvas-recorder/index.d.ts(26,44):
TS2307: Cannot find module '../../../../../Users/roboshoes/Projects/canvas-recorder/src/shared'.
and
declare const bootstrap: (options?: import("../../../../../Users/roboshoes/Projects/canvas-recorder/src/shared").BoostrapOptions) => void;
this is from v1.7.1
so I havent verified if this happens with v1.8.0
yet.
As you know, I typically control my sketches / apps with my own loop or library animitter and deciding to record the frames with canvas-recorder
comes mid-project.
Using addFrame
and downloadBundle
is excellent for this, recording the frames with the addition of just a couple lines; however those functions use a shared instance. If I have multiple canvases to simultaneously save they end up interleaved in the resulting bundle.
It would be very helpful if Recorder
could include addFrame
and downloadBundle
methods so that I may keep these frames in separate bundles while maintaining a light footprint of using canvas-recorder
.
โ๏ธ
Currently the draw
callback recieves both the context and the time since the start of the recording. However, in a recording of a fixed amount of frames, I would like to know how fare I am through the animation relative. Maybe an additionargument t
that returns the progress between 0
and 1
. Alternativly a way to query that.
Hi there, It seems like this tool is meant to provide it's own canvas context, but what about in cases where there's already an existing canvas context that I want to record? Any tips for three.js users?
Thanks!
In options, or seperate callback, add a postprocessing shader. Using image-shader
I need the highest video quality possible to record CSS and JS animations inside an HTML element. I have tried html2canvas library and RecordRTC to record the canvas but the quality of the recording is very low. Your solution seems to address this problem but I don't know how to pass the canvas and context to the draw method.
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
Can you please provide an HTML example to demonstrate the use of a specific canvas element for recording? I really appreciate it. Here is my code snippet since last year. I wish I can use canvas-recorder
to automate tons of recording that I have to do.
When the canvas has a transform applied, let's say context.translate( 10, 10 )
then the clearing will be off by 10 pixels as it's done via context.clearRect( 0, 0, canvas.width, canvas.height )
.
A simple workaround is canvas.width = canvas.width
though less performant.
Another solution would be:
context.save();
context.setTranfsorm( 1, 0, 0, 1 0, 0 );
context.clearRect( canvas.width, canvas.height );
context.restore();
There should be a way to provide a canvas instead of implicitly creating the canvas internally. This is necessary for environments that created the canvas prior or have a different framework managing the state of the canvas.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.