How to attach browser-generated blob as image to Sanity editor?

import {createClient} from '@sanity/client'

const client = createClient({
  projectId: 'your-project-id',
  dataset: 'your-dataset',
  token: process.env.SANITY_WRITE_TOKEN, // You'll need a write token
  apiVersion: '2025-02-06',
  useCdn: false
})

// 1. Generate your og:image (example using canvas)
async function generateOgImage(title, description) {
  const canvas = document.createElement('canvas')
  canvas.width = 1200
  canvas.height = 630
  const ctx = canvas.getContext('2d')
  
  // Draw your og:image content
  ctx.fillStyle = '#000'
  ctx.fillRect(0, 0, 1200, 630)
  ctx.fillStyle = '#fff'
  ctx.font = '48px sans-serif'
  ctx.fillText(title, 50, 100)
  
  // 3. Convert canvas to blob
  return new Promise(resolve => {
    canvas.toBlob(resolve, 'image/png')
  })
}

// 4. Upload blob to Sanity
async function uploadOgImage(blob, documentId) {
  const asset = await client.assets.upload('image', blob, {
    filename: `og-image-${documentId}.png`,
    contentType: 'image/png'
  })
  
  // 5. Attach to your document
  await client
    .patch(documentId)
    .set({
      ogImage: {
        _type: 'image',
        asset: {
          _type: 'reference',
          _ref: asset._id
        }
      }
    })
    .commit()
    
  return asset
}

// Put it all together
async function handleGenerateOgImage(documentId, title, description) {
  const blob = await generateOgImage(title, description)
  const asset = await uploadOgImage(blob, documentId)
  
  // 6. Use the URL in your og:image tag
  const imageUrl = asset.url
  console.log('og:image URL:', imageUrl)
  return imageUrl
}

// customOgImageSource.js
export default {
  name: 'og-image-generator',
  title: 'Generate OG Image',
  component: OgImageGenerator,
  icon: () => '🎨'
}

function OgImageGenerator({onSelect, document}) {
  const handleGenerate = async () => {
    const blob = await generateOgImage(document.title, document.description)
    
    // Upload using the client
    const asset = await client.assets.upload('image', blob, {
      filename: `og-${document._id}.png`
    })
    
    // Return to the image field
    onSelect([{
      kind: 'assetDocumentId',
      value: asset._id
    }])
  }
  
  return <button onClick={handleGenerate}>Generate OG Image</button>
}

{
  name: 'ogImage',
  type: 'image',
  options: {
    sources: [
      {name: 'og-image-generator', title: 'Generate', component: OgImageGenerator}
    ]
  }
}