close

DEV Community

Sylar
Sylar

Posted on

How I built file tools that never upload your files (Canvas API + Web Workers)

#javascript #privacy #showdev #webdev

Most "free online file tools" upload your file to a server, do the work there, and send it back. For a lot of tasks that is unnecessary and, honestly, a privacy smell. When I built Filuni (a free toolbox of 121 file tools), I made a rule: if the browser can do the job, the file should never leave the device. Here is how that actually works and where it breaks down.

What runs fully in the browser

For images, text and JSON, everything happens client-side. A few concrete examples:

Image compression / resize / crop — load the file into an <img> or createImageBitmap(), draw it onto a <canvas> at the target size, then export with canvas.toBlob(blob => ..., 'image/jpeg', quality). No upload, no round trip.

const bitmap = await createImageBitmap(file);
const canvas = new OffscreenCanvas(targetW, targetH);
const ctx = canvas.getContext('2d');
ctx.drawImage(bitmap, 0, 0, targetW, targetH);
const blob = await canvas.convertToBlob({ type: 'image/jpeg', quality: 0.8 });
Enter fullscreen mode Exit fullscreen mode

Heavy text / JSON work — formatting, diffing, regex testing on large inputs can block the main thread. Move it into a Web Worker so the UI stays responsive:

const worker = new Worker('format.worker.js');
worker.postMessage(bigJsonString);
worker.onmessage = e => render(e.data);
Enter fullscreen mode Exit fullscreen mode

Using OffscreenCanvas inside a worker means even the image work never touches the main thread.

Where the browser is not enough

Being honest about the limits matters:

  • Video / audio transcoding — possible with ffmpeg.wasm, but for large files it is slow and memory-hungry. I run these server-side with FFmpeg instead.
  • Office to PDF — needs a real rendering engine, so that goes through LibreOffice on the server.
  • OCR on scanned PDFs — heavy; better server-side.

For anything that does hit the server, the rule becomes: process, return, and delete the file automatically right after. No long-term storage.

Why bother

Three things I did not expect:

  1. It is cheaper. Client-side tools cost almost nothing to run, so they can stay free without ads-everywhere.
  2. It is faster for the common case — no upload/download latency on a 3 MB image.
  3. Users notice. Saying plainly "this file never leaves your browser" changed how people talked about the tool in feedback.

Takeaway

You do not need a backend for most file utilities. <canvas>, OffscreenCanvas, Web Workers and the File API cover a surprising amount. Push to the server only what genuinely needs it, and delete it immediately when you do.

Disclosure: I build and run Filuni, so this is the approach behind a real product, not just theory. Happy to answer questions about any specific tool in the comments.

Top comments (0)