WebAssemblyとマルチスレッドによる環境に依存しない高速画像変換

1setLimit(8); // Web Worker limit
2launchWorker(); // Prepare Worker in advance.
3
4const formats = ["none", "webp", "jpeg", "png", "avif"] as const;
5const AsyncImage: FC<{
6  file: File;
7  format: (typeof formats)[number];
8  quality: number;
9  speed: number;
10  size: [number, number];
11}> = ({ file, format, quality, size, speed }) => {
12  const [time, setTime] = useState<number>();
13  const [image, setImage] = useState<OptimizeResult | null | undefined>(null);
14  useEffect(() => {
15    const convert = async () => {
16      setImage(null);
17      // Wait for WebWorkers to become available.
18      // If you don't wait, they will still be loaded in the queue, but the conversion time will no longer be accurately measured.
19      await waitReady();
20      const t = performance.now();
21      const image = await optimizeImageExt({
22        image: await file.arrayBuffer(),
23        format,
24        quality,
25        speed,
26        width: size[0] || undefined,
27        height: size[1] || undefined,
28      });
29      setTime(performance.now() - t);
30      setImage(image);
31    };
32    convert();
33  }, [file]);
34  const src = useMemo(
35    () =>
36      image &&
37      URL.createObjectURL(
38        new Blob([image.data], {
39          type: format === "none" ? file.type : `image/${format}`,
40        })
41      ),
42    [image]
43  );
44  const filename =
45    format === "none" ? file.name : file.name.replace(/\.\w+$/, `.${format}`);
46  return (
47    <div className="border border-gray-300 rounded-4 overflow-hidden relative w-64 h-64 grid">
48      {image === undefined && <div>Error</div>}
49      {src && image && (
50        <>
51          <a download={filename} href={src}>
52            <img
53              className="flex-1 object-contain block overflow-hidden"
54              src={src}
55            />
56          </a>
57          <div className="bg-white/80 w-full z-10 text-right p-0 absolute bottom-0 font-bold">
58            <div>{filename}</div>
59            <div>{time?.toLocaleString()}ms</div>
60            <div>
61              {format !== "none" ? "Optimize" : "Original"}:{" "}
62              {image.width.toLocaleString()}x{image.height.toLocaleString()} -{" "}
63              {Math.ceil(image.data.length / 1024).toLocaleString()}KB
64            </div>
65          </div>
66        </>
67      )}
68      {image === null && (
69        <div className="m-auto animate-spin h-10 w-10 border-4 border-blue-600 rounded-full border-t-transparent" />
70      )}
71    </div>
72  );
73};

1const ImageInput: FC<{ onFiles: (files: File[]) => void }> = ({ onFiles }) => {
2  const refInput = useRef<HTMLInputElement>(null);
3  const [focus, setFocus] = useState(false);
4  return (
5    <>
6      <div
7        className={classNames(
8          "w-64 h-32 border-dashed border flex justify-center items-center cursor-pointer select-none m-2 rounded-4xl p-4",
9          focus && "outline outline-blue-400"
10        )}
11        onDragOver={(e) => {
12          e.preventDefault();
13          e.stopPropagation();
14        }}
15        onDragEnter={(e) => {
16          e.preventDefault();
17          e.stopPropagation();
18        }}
19        onDoubleClick={() => {
20          refInput.current?.click();
21        }}
22        onClick={() => {
23          refInput.current?.focus();
24        }}
25        onDrop={(e) => {
26          onFiles(Array.from(e.dataTransfer.files));
27          e.preventDefault();
28        }}
29      >
30        Drop here, copy and paste or double-click to select the file.
31      </div>
32      <input
33        ref={refInput}
34        className="absolute size-0"
35        type="file"
36        multiple
37        accept=".jpg,.png,.gif,.svg,.avif,.webp"
38        onFocus={() => setFocus(true)}
39        onBlur={() => setFocus(false)}
40        onPaste={(e) => {
41          e.preventDefault();
42          onFiles(Array.from(e.clipboardData.files));
43        }}
44        onChange={(e) => {
45          e.preventDefault();
46          if (e.currentTarget.files) onFiles(Array.from(e.currentTarget.files));
47        }}
48      />
49    </>
50  );
51};

1import { promises as fs } from "node:fs";
2import { optimizeImage } from "wasm-image-optimization";
3
4const formats = ["webp", "jpeg", "png", "avif"] as const;
5
6const main = async () => {
7  const title = "Single thread";
8  console.time(title);
9  await fs.mkdir("./image_output", { recursive: true });
10  const files = await fs.readdir("./images");
11  for (const file of files) {
12    await fs.readFile(`./images/${file}`).then(async (image) => {
13      console.log(
14        `${file} ${Math.ceil(image.length / 1024).toLocaleString()}KB`
15      );
16      for (const format of formats) {
17        const label = `[${file}] -> [${format}]`;
18        console.time(label);
19        await optimizeImage({
20          image,
21          quality: 80,
22          format,
23          width: 512,
24        }).then((encoded) => {
25          if (encoded) {
26            console.timeLog(
27              label,
28              `${Math.ceil(encoded.length / 1024).toLocaleString()}KB`
29            );
30            const fileName = file.split(".")[0];
31            fs.writeFile(`image_output/${fileName}.${format}`, encoded);
32          }
33        });
34      }
35    });
36  }
37  console.timeEnd(title);
38};
39main();

1import { promises as fs } from "node:fs";
2import {
3  optimizeImage,
4  close,
5  setLimit,
6} from "wasm-image-optimization/node-worker";
7
8const formats = ["webp", "jpeg", "png", "avif"] as const;
9
10setLimit(4); // set worker limit
11
12const main = async () => {
13  const title = "Multi thread";
14  console.time(title);
15  await fs.mkdir("./image_output", { recursive: true });
16  const files = await fs.readdir("./images");
17  const p = files.map(async (file) => {
18    return fs.readFile(`./images/${file}`).then((image) => {
19      console.log(
20        `${file} ${Math.floor(image.length / 1024).toLocaleString()}KB`
21      );
22      const p = formats.map((format) => {
23        const label = `[${file}] -> [${format}]`;
24        console.time(label);
25        return optimizeImage({
26          image,
27          quality: 100,
28          format,
29          width: 512,
30        }).then((encoded) => {
31          if (encoded) {
32            console.timeLog(
33              label,
34              `${Math.floor(encoded.length / 1024).toLocaleString()}KB`
35            );
36            const fileName = file.split(".")[0];
37            fs.writeFile(`image_output/${fileName}.${format}`, encoded);
38          }
39        });
40      });
41      return Promise.all(p);
42    });
43  });
44  await Promise.all(p);
45  close(); // close worker
46  console.timeEnd(title);
47};
48main();