Merge pull request #12 from readyplayerme/feature/capture-extension

feat(avatar): capture props updated & callback screenshot added

src/components/Avatar/Avatar.component.tsx

@@ -97,7 +97,7 @@ export interface AvatarProps extends LightingProps {
   /**
    * Return base64 image after making screenshot of the canvas.
    */
-  onCapture?: CaptureType;
+  capture?: CaptureType;
 }
 
 /**
@@ -125,7 +125,7 @@ export const Avatar: FC<AvatarProps> = ({
   style,
   emotion,
   idleRotation = false,
-  onCapture,
+  capture,
   background
 }) => {
   const AvatarModel = useMemo(() => {
@@ -183,7 +183,7 @@ export const Avatar: FC<AvatarProps> = ({
           </group>
         )}
         {background?.src && <Box {...background} />}
-        {onCapture && <Capture onCapture={onCapture} />}
+        {capture && <Capture {...capture} />}
       </Suspense>
     </BaseCanvas>
   );

src/components/Capture/Capture.component.tsx

@@ -1,18 +1,32 @@
-import React, { FC } from 'react';
+import React, { FC, useEffect } from 'react';
 import { useThree } from '@react-three/fiber';
 
-export type CaptureType = (image?: string) => void;
+type CaptureSettingsType = {
+  quality?: number;
+  type?: string;
+};
 
-type CaptureProps = {
-  onCapture?: CaptureType;
+export type CaptureType = {
+  trigger: boolean;
+  callBack: (capture?: string) => void;
+  settings?: CaptureSettingsType;
 };
 
-const Capture: FC<CaptureProps> = ({ onCapture }) => {
+type CaptureProps = CaptureType;
+
+const Capture: FC<CaptureProps> = ({ trigger, settings, callBack }) => {
   const gl = useThree((state) => state.gl);
 
-  if (onCapture) {
-    onCapture(gl.domElement.toDataURL('image/png', 0.1));
-  }
+  const type = settings?.type || 'image/png';
+  const quality = settings?.quality || 0.1;
+
+  useEffect(() => {
+    if (trigger) {
+      const capture = gl.domElement.toDataURL(type, quality);
+
+      callBack(capture);
+    }
+  }, [trigger]);
 
   // eslint-disable-next-line react/jsx-no-useless-fragment
   return <></>;