search

jeeliz / jeelizFaceFilter

Javascript/WebGL lightweight face tracking library designed for augmented reality webcam filters. Features : multiple faces detection, rotation, mouth opening. Various integration examples are provided (Three.js, Babylon.js, FaceSwap, Canvas2D, CSS3D...).
https://jeeliz.com
Apache License 2.0
2.68k stars 533 forks source link

Button to take a screenshot. #53

Closed AnastasiiaaaaM closed 5 years ago

AnastasiiaaaaM commented 5 years ago

I'm using the jeelizFaceFilter.js to track the face and add a mask, as it's done in Comedy Glasses Demo. I need to add a button to get the photo shot. screenshot 2018-10-30 at 11 04 20

Here is my code: https://gist.github.com/AnastasiiaaaaM/39c1b694301b96fbabbade996041d063 But when I make a screenshot of a div "container". I get a photo of a camera canvas and mask as a full screen screenshot 2018-10-30 at 12 49 54

xavierjs commented 5 years ago

I think there is a problem with html2canvas(). It does not take into account CSS3D. In the main script (https://github.com/jeeliz/jeelizFaceFilter/blob/master/demos/CSS3D/comedy-glasses/demo_comedyGlasses.js), the div is positionned using a 3D transform matrix (function apply_matrix ).

On the github of html2canvas, a guy seems to confirm: https://github.com/niklasvh/html2canvas/issues/345#issuecomment-36919474

If I were you, if the screeshot feature is very important, I would remake the demo using the THREE.JS boilerplate, then I would replace the cube by a textured plane and it would be easy to do a screenshot (https://stackoverflow.com/questions/15558418/how-do-you-save-an-image-from-a-three-js-canvas) without using any library like html2canvas.