Comments (6)
No idea
from jsgif.
totally does. SO AWESOME!
sudo code:
var readBuffer = new Uint8Array(canvas.width * canvas.height * 4);
context.readPixels(0, 0, canvas.width, canvas.height, context.RGBA, context.UNSIGNED_BYTE, readBuffer);
encoder.addFrame(readBuffer, true);
I noticed the AS3 version is under MIT License. Is yours as well?
from jsgif.
Yeah
from jsgif.
for some reason, on webgl renderer method getcontext is always null.
The only method returning an image is canvas.toDataURL("image/png"); this seems not to be compatible with this function, or maybe anyone has an idea how?
from jsgif.
Hi @deethee,
This link should help you:
http://stackoverflow.com/questions/32556939/saving-canvas-to-image-via-canvas-todataurl-results-in-black-rectangle#answers
Also to get the context you can always hijack createElement and getContext methods and save the context:
new function() {
var orgCreateElement = document.createElement;
// hijack createElement to hijack all the canvases getContext
Object.defineProperty(document, 'createElement',
{value: function(type) {
var ans = orgCreateElement.apply(this, Array.prototype.slice.call(arguments));
if (type == 'canvas') {
var orgGetContext = ans.getContext;
// hijack getContext to catch all the contexts and save then in window.mainContext (or wherever . . .)
ans.getContext = function() {
if (!window.mainContext)
window.mainContext = [];
if (typeof arguments[1] === 'object')
// set preserveDrawingBuffer = true will help you with canvas.toDataURL("image/png"); method
arguments[1].preserveDrawingBuffer = true;
var c = orgGetContext.apply(this, Array.prototype.slice.call(arguments));
window.mainContext.push(c);
return c;
};
}
return ans;
}});
}
That may be an overkill but just in case you're using some other framework (such as three.js) . . .
Make sure this code is running before any canvas has been created.
Your context is inside window.mainContext array.
Regarding @jonobr1 code unfortunately the browser always gets stuck in this line:
encoder.addFrame(readBuffer, true);
with very high CPU hz
from jsgif.
I've decided to go with that one:
https://github.com/yahoo/gifshot
while providing an images array with canvas.toDataURL("image/png") as images sources.
Works for me.
from jsgif.
Related Issues (20)
- License? HOT 2
- The encoding of the Gif fails depending on the size of the canvas HOT 1
- Background image shown in canvas but not in image output HOT 7
- No license information HOT 1
- `addFrame` with `is_imageData=true` makes Chrome hang up HOT 3
- Writing canvas to GIF outputs double speed GIF HOT 1
- License HOT 1
- last frame of addFrame is not added to gif HOT 1
- Data URI generates a black gif HOT 4
- jsapng? can you make convas into animated PNG? HOT 5
- GIF almost empty HOT 4
- Animated Gif comes out black w/ Web Workers HOT 6
- Pixel width black line on left edge of GIF
- Add git tag
- My webcam snapshot is being overlay by the gif ??
- No plugin.xml file
- Color Reproduction Issue HOT 2
- Fixes report HOT 1
- Global color map HOT 2
- Crashes at 300+ Frames HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from jsgif.