wasm-image-converter

Image Converter

Install:

npm i wasm-image-converter

Example:

import init, { convertImage } from 'wasm-image-converter';

export const Test = () => {
  init()
    .then(() => {
      console.log('initialized');
    })
    .catch(console.error);

  let inputFile: Uint8Array;
  function convert() {
    console.log('convert called');

    const convertedWebp = convertImage(inputFile, 'png', 'webp');

    console.log('convertedWebp', convertedWebp);

    const blob = new Blob([convertedWebp], { type: 'image/webp' });
    const url = URL.createObjectURL(blob);
    const img = new Image();
    img.src = url;
    document.body.appendChild(img);

    console.log('converted');

    // download
    const a = document.createElement('a');
    a.href = url;
    a.download = 'converted.webp';
    a.click();

    console.log('downloaded');
  }

  function fileToUint8Array(file: File): Promise<Uint8Array> {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onload = () => resolve(new Uint8Array(reader.result! as ArrayBuffer));
      reader.onerror = reject;
      reader.readAsArrayBuffer(file);
    });
  }

  return (
    <div>
      <h1>Test</h1>
      {/* Input single image file */}
      <input
        type="file"
        onChange={async (event) => {
          const file = event.target.files![0]; // 첫 번째 파일 가져오기
          if (!file) return;

          inputFile = await fileToUint8Array(file);
        }}
      />
      {/* convert image */}
      <button onClick={() => convert()}>Convert</button>
    </div>
  );
};

Reference: https://github.com/tomvoet/wasm-image-convert