Does this work with WebGLRenderingContext?

[antimatter15]

No idea

[jonobr1]

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?

[antimatter15]

Yeah

[deethee]

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?

[ranbuch]

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

[ranbuch]

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.