Deno support? #35

Activity

1. evanw commented on May 3, 2024

   

   evanw

   on May 3, 2024

   Owner

   More actions

   Some thoughts:

   • Do you have some code to reproduce your issue?

   • Are you calling rgbaToThumbHash in Deno? That expects decoded RGBA data as input, but the input you posted here looks like a JPEG file instead of RGBA (byteLength is not a multiple of 4 and the data starts with ff d8). You're supposed to decode the image first.
2. kierancrown commented on May 3, 2024

   

   kierancrown

   on May 3, 2024

   Author

   More actions

   Some thoughts:

   • Do you have some code to reproduce your issue?
   • Are you calling rgbaToThumbHash in Deno? That expects decoded RGBA data as input, but the input you posted here looks like a JPEG file instead of RGBA (byteLength is not a multiple of 4 and the data starts with ff d8). You're supposed to decode the image first.

   Sure this is the example I've managed to cobble together so far based on the NodeJS example. Do you know of a way to convert into the expected format? Sharp isn't available for Deno. I'm using ImageMagick but it obviously isn't exporting in the same way

   // Setup type definitions for built-in Supabase Runtime APIs
   /// <reference types="https://esm.sh/v135/@supabase/functions-js@2.3.1/src/edge-runtime.d.ts" />
   
   import { createClient } from "https://esm.sh/@supabase/supabase-js@2.7.1";
   import {
     ImageMagick,
     IMagickImage,
     initialize,
     MagickFormat,
   } from "https://deno.land/x/imagemagick_deno/mod.ts";
   import { Buffer } from "jsr:@std/io/buffer";
   import * as ThumbHash from "npm:thumbhash@0.1.1";
   
   const corsHeaders = {
     "Access-Control-Allow-Origin": "*",
     "Access-Control-Allow-Headers": "authorization, x-client-info, apikey",
   };
   
   interface WebhookPayload {
     type: "INSERT";
     table: string;
     record: any;
     schema: "public";
   }
   
   const supabase = createClient(
     Deno.env.get("SUPABASE_URL")!,
     Deno.env.get("SUPABASE_SERVICE_ROLE_KEY")!
   );
   
   const resizeImage = (image: Uint8Array): Promise<Uint8Array> => {
     return new Promise((resolve) => {
       (async () => {
         // Initialize ImageMagick
         await initialize();
         await ImageMagick.read(image, async (img: IMagickImage) => {
           img.resize(100, 100);
   
           await img.write(MagickFormat.Jpeg, (data: Uint8Array) => {
             resolve(data);
           });
         });
       })();
     });
   };
   
   Deno.serve(async (req) => {
     const payload: WebhookPayload = await req.json();
     console.log("Request received", JSON.stringify(payload, null, 2));
   
     try {
       // Get the trigger data which contains the path of the image
       const triggerData = payload.record;
   
       // Download the image from the bucket based on the provided path
       const { data: imageData, error: imageError } = await supabase.storage
         .from("user_profile_pictures")
         .download(triggerData.path);
       if (imageError) throw imageError;
   
       console.log((await imageData.arrayBuffer()).byteLength);
   
       // Convert image data to buffer
       const imageBuffer = await imageData.arrayBuffer();
       const input = new Uint8Array(imageBuffer, 0, imageBuffer.byteLength);
       const resizedImageBuffer = await resizeImage(input);
   
       const binaryThumbHash = ThumbHash.rgbaToThumbHash(
         100,
         100,
         resizedImageBuffer
       );
       
       console.log("binaryThumbHash:", new Buffer(binaryThumbHash));
   
       // Update the database with the generated thumbhash
       const { error: updateError } = await supabase
         .from(payload.table)
         .update({ thumbhash: binaryThumbHash })
         .eq("path", triggerData.path);
       if (updateError) throw updateError;
   
       return new Response(JSON.stringify({ success: true }), {
         headers: { ...corsHeaders, "Content-Type": "application/json" },
         status: 200,
       });
     } catch (error) {
       console.error(error);
   
       return new Response(JSON.stringify({ error: error.message }), {
         headers: { ...corsHeaders, "Content-Type": "application/json" },
         status: 400,
       });
     }
   });