CSS Filters in a module
vagnervjs opened this issue · 5 comments
Create a separate module for css filters.
What about canvas filters instead of css filters? Or add a parameter which holds a value, that decides if canvas or css filters are used? Or make 2 modules, one for css filters and one for canvas filters.
Something like:
useCanvas: true //this will create canvas images from the frames and use canvas filters instead of css filters (works on more devices)
I liked the idea of create 2 modules
As you can see, working with canvas image data is pretty fast http://html5demos.com/gum-canvas and rendering performance somewhat similar if you apply CSS filter. But for some reason filters fails with image sequences.
But if you still going to deliver Frame Player as lib for mobile, I think you should consider to get rid of both CSS Filters and manipulations with canvas image data. Manipulation with canvas image data requires getting a snapshot of pixels data, performing some calculations with it and putting it back to canvas. It's really heavy things to do for mobile. I'd suggest to have pre-rendered image sequences, this will dramatically improve rendering performance.
There's canvas blending modes spec, which provides native Photoshop-like filtering, but I guess this is not ready for mobile yet.
Applying the filter to image sequences should not be the problem. You just have to replace the mages with the canvas elements.
No, this is also in no official specification and is not supported by most browsers.
Generella we are now doing a clone of JSMovie http://jsmovie.burkhardt-medienproduktion.de/?page=home which is really great.
But CSS filters as module makes sense in my opinion.
After a long time we have a new release using canvas element instead images.
From now on will be simple to implement a separate module of native canvas filters.