This library allows for cross-browser image downscaling utilizing OffscreenCanvas.

• This is browser-only utility and will not work in Node.js.
• Safari 16.4 or later is required due to the use of OffscreenCanvas.
  https://caniuse.com/offscreencanvas

• npm install @misskey-dev/browser-image-resizer
• yarn add @misskey-dev/browser-image-resizer
• pnpm add @misskey-dev/browser-image-resizer

import { readAndCompressImage } from '@misskey-dev/browser-image-resizer';

const config = {
  quality: 0.7,
  maxWidth: 800,
  maxHeight: 600
};

// Note: A single file comes from event.target.files on <input>
async function uploadImage(file) {
  try {
    let resizedImage = await readAndCompressImage(file, config);

    const url = `http://localhost:3001/upload`;
    const formData = new FormData();
    formData.append('images', resizedImage);
    const options = {
      method: 'POST',
      body: formData
    };

    let result = await fetch(url, options);

    // TODO: Handle the result
    console.log(result);
    return result;
  } catch (error) {
    console.error(error);
    throw(error);
  }
}

Even large images can be processed in a separate thread using a worker.

import { readAndCompressImage } from "browser-image-resizer";

onmessage = async (e) => {
    const converted = await readAndCompressImage(e.data, { maxWidth: 300 });
    postMessage(converted, [converted]);
}

const worker = new Worker('worker.js');

const img = document.getElementById('viewer_img');
worker.onmessage = (e) => {
  img.src = URL.createObjectURL(e.data);
};

async function convert(file: File) {
  const bmp = await createImageBitmap(file);
  worker.postMessage(bmp, [bmp]);
}

• file: An image source that createImageBitmap can read.
  See https://developer.mozilla.org/en-US/docs/Web/API/createImageBitmap
• config: See below

• null: Performs downscaling of the image via canvas drawImage(). This means you are delegating the downscaling process to the browser, which is usually the fastest option, although results may vary depending on the browser's implementation.
• bilinear: Better quality, slower. Comes from upstream (ericnogralesbrowser-image-resizer).
• hermite: Worse quality, faster. Comes from viliusle/Hermite-resize. Will dispatch workers for better performance.
• hermite_single: Worse quality, faster. Single-threaded.

A Promise that yields an Image Blob or OffscreenCanvas

calculateSize(src: { width: number; height: number; }, config) => { width: number; height: number; }

With this function you can get the pre-calculated width and height of the resulting image.

The output image is derived from OffscreenCanvas.convertToBlob.
https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas/convertToBlob

• EXIF and other metadata will be erased.
• Rotation will be automatically corrected.
  • It is based on the specifications of recent versions of modern browsers and may not work with older browsers.
  • See w3c/csswg-drafts#4666 (comment)
  • Firefox support seems to be available from version 78. by mei23
• Color profile is srgb. Firefox 97 does not attach the ICC profile, but Chrome does.
• You can specify image/webp as the mimeType but Safari does not support..