S
Supabase•2w ago
Diego

Has someone used https://jsr.io/@astral/astral successfully with edge functions?

I would like to implement an edge function, which should take HTML, width and height for the viewport, and create a screenshot after rendering the HTML on a browser. My current Python code doing this work with Playwright: 
    with sync_playwright() as p:
        browser = p.chromium.launch()
        page = browser.new_page(viewport={"width": width, "height": height})
        page.set_content(html)
        pic: bytes = page.screenshot(type="jpeg", quality=quality)
        browser.close()
        return pic
    with sync_playwright() as p:
        browser = p.chromium.launch()
        page = browser.new_page(viewport={"width": width, "height": height})
        page.set_content(html)
        pic: bytes = page.screenshot(type="jpeg", quality=quality)
        browser.close()
        return pic
I tried doing so with astral, but ran into several issues, first of all with the sync writing of files which does not seem to be working on edge functions. Found no way to configure it in a way it does async writes. Also happy to use a different library if it's easier to get done this way. Thx for your input!
1 Reply
inder
inder•2w ago
I don't know about the usage of this library and I have my doubts that a browser will be able to run in edge function but the return type of screenshot is Uint8Array. You can convert it to a blob and upload it to supabase storage. I tried this in a sandbox and blob is uploaded to suapbase storage 
const screenshot = await page.screenshot({ format: "jpeg" });
const blob = new Blob([screenshot], { type: "image/jpeg" });
const screenshot = await page.screenshot({ format: "jpeg" });
const blob = new Blob([screenshot], { type: "image/jpeg" });
const { error } = await supabaseClient.storage
  .from("test-bucket")
  .upload(crypto.randomUUID() + "-file.jpg", blob, { contentType: data.type });
if (error) console.log(error.message);
const { error } = await supabaseClient.storage
  .from("test-bucket")
  .upload(crypto.randomUUID() + "-file.jpg", blob, { contentType: data.type });
if (error) console.log(error.message);

Did you find this page helpful?