Arkatme•12mo ago

Resize image/convert on upload

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.

2 Replies

Aléki•12mo ago

👋 Look for imagemagick_deno, dunno if they take webp format

Arkatme•12mo ago

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);
  }
}