Open kierancrown opened 6 months ago
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.
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 withff 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,
});
}
});
Does anybody have experience getting this to run in Deno?
My output is constantly looking like this
While my input looks like this
I've been trying to get this to work for a few days now. Wondering how this works in Deno as it works perfectly fine in NodeJS. Maybe due to the Buffer object