working on both platforms

src/lib/api/index.ts

@@ -34,9 +34,13 @@ export async function uploadBlob(
 ): Promise<ComAtprotoRepoUploadBlob.Response> {
   if (isWeb) {
     // `blob` should be a data uri
-    return agent.uploadBlob(convertDataURIToUint8Array(blob), {
+    console.log(convertDataURIToUint8Array(blob))
+
+    const x = await agent.uploadBlob(convertDataURIToUint8Array(blob), {
       encoding,
     })
+
+    return x
   } else {
     // `blob` should be a path to a file in the local FS
     return agent.uploadBlob(

src/screens/Onboarding/StepFinished.tsx

@@ -78,10 +78,12 @@ export function StepFinished() {
           const res = await uploadBlob(
             getAgent(),
             profileStepResults.imageUri,
-            profileStepResults.imageUri,
+            profileStepResults.imageMime,
           )
 
-          existing.avatar = res.data.blob
+          if (res.data.blob) {
+            existing.avatar = res.data.blob
+          }
         }
 
         return existing

src/screens/Onboarding/StepProfile/PlaceholderCanvasDontNeed.web.tsx

@@ -1,10 +1,11 @@
 import React from 'react'
 import {useAvatar} from '#/screens/Onboarding/StepProfile/index'
+import {StyleSheet, View} from 'react-native'
 
-const CANVAS_HEIGHT = 24 * 10
-const CANVAS_OFFSET = 24 * 1.5
+const CANVAS_HEIGHT = 24 * 20
+const CANVAS_OFFSET = 24 * 3
 
-interface PlaceholderCanvasRef {
+export interface PlaceholderCanvasRef {
   capture: () => string
 }
 
@@ -16,7 +17,7 @@ export const PlaceholderCanvas = React.forwardRef(function PlaceholderCanvas(
   const canvasRef = React.useRef<HTMLCanvasElement>(null)
 
   const capture = React.useCallback(() => {
-    return ''
+    return canvasRef.current?.toDataURL('image/jpeg')
   }, [])
 
   React.useImperativeHandle(ref, () => ({
@@ -35,9 +36,20 @@ export const PlaceholderCanvas = React.forwardRef(function PlaceholderCanvas(
     ctx.fillStyle = '#fff'
     ctx.lineWidth = 0.1
     ctx?.translate(CANVAS_OFFSET, CANVAS_OFFSET)
-    ctx?.scale(7, 7)
+    ctx?.scale(14, 14)
     ctx?.fill(path)
   }, [avatar.backgroundColor, avatar.placeholder.path])
 
-  return <canvas ref={canvasRef} height={CANVAS_HEIGHT} width={CANVAS_HEIGHT} />
+  return (
+    <View style={styles.container}>
+      <canvas ref={canvasRef} height={CANVAS_HEIGHT} width={CANVAS_HEIGHT} />
+    </View>
+  )
+})
+
+const styles = StyleSheet.create({
+  container: {
+    top: -2000,
+    position: 'absolute',
+  },
 })

src/screens/Onboarding/StepProfile/index.tsx

@@ -66,15 +66,15 @@ export function StepProfile() {
 
   const canvasRef = React.useRef<PlaceholderCanvasRef>(null)
 
-  React.useEffect(() => {
-    // TODO remove, this is for testing
-    ;(async () => {
-      const res = await canvasRef.current?.capture()
-      if (res) {
-        setUri(res)
-      }
-    })()
-  }, [avatar])
+  // React.useEffect(() => {
+  //   // TODO remove, this is for testing
+  //   ;(async () => {
+  //     const res = await canvasRef.current?.capture()
+  //     if (res) {
+  //       setUri(res)
+  //     }
+  //   })()
+  // }, [avatar])
 
   React.useEffect(() => {
     track('OnboardingV2:StepProfile:Start')