D
Deno

help

Resize image/convert on upload

AArkatme8/5/2023
Hi there, I want to store images uploaded in webp format at 200x200px. Has anyone done something like this before? The only package I could find was last updated like 3+ years ago.
Aaleyki8/5/2023
👋 Look for imagemagick_deno, dunno if they take webp format
AArkatme8/5/2023
Ah thank you. Got it working eventually
async function uploadAvatar(user_id: string, profileImageFile: File, storage: StorageClient) {
// Initialize ImageMagick
await initialize();

// Read the profileImageFile as a Uint8Array
const fileData: Uint8Array = new Uint8Array(await profileImageFile.arrayBuffer());

// Use ImageMagick to process the image and get the processed data as Uint8Array
const processedData: Uint8Array = ImageMagick.read(fileData, (img: IMagickImage) => {
img.resize(200, 200);

// Use the write() method to specify the output format (MagickFormat.Webp)
return img.write(MagickFormat.Webp, (data: Uint8Array) => data);
});

// Create a new File from the processed data
const processedImageFile = new File([processedData], `${user_id}.webp`, {
type: 'image/webp',
});

// Use the same code for uploading the processed image to Supabase
const filename = `public/${user_id}.webp`;
const { data, error } = await storage.from('avatars').upload(filename, processedImageFile, {
cacheControl: '3600',
upsert: false,
});

if (error) {
console.log(error);
}
}
async function uploadAvatar(user_id: string, profileImageFile: File, storage: StorageClient) {
// Initialize ImageMagick
await initialize();

// Read the profileImageFile as a Uint8Array
const fileData: Uint8Array = new Uint8Array(await profileImageFile.arrayBuffer());

// Use ImageMagick to process the image and get the processed data as Uint8Array
const processedData: Uint8Array = ImageMagick.read(fileData, (img: IMagickImage) => {
img.resize(200, 200);

// Use the write() method to specify the output format (MagickFormat.Webp)
return img.write(MagickFormat.Webp, (data: Uint8Array) => data);
});

// Create a new File from the processed data
const processedImageFile = new File([processedData], `${user_id}.webp`, {
type: 'image/webp',
});

// Use the same code for uploading the processed image to Supabase
const filename = `public/${user_id}.webp`;
const { data, error } = await storage.from('avatars').upload(filename, processedImageFile, {
cacheControl: '3600',
upsert: false,
});

if (error) {
console.log(error);
}
}

Looking for more? Join the community!