DEV Community

cai13808519901-cpu
cai13808519901-cpu

Posted on

Building a Browser-Side Image Converter: No Server, No Upload, No AI

#javascript #privacy #webdev #html

I needed to convert some portrait screenshots to landscape for a LinkedIn carousel. Simple task, right?

Every tool I found wanted me to upload my images to their server. One added watermarks. Another required an account. The "free" one had a 3-per-day limit. And they were all slow because of the server round-trip.

I kept thinking: this is a geometry problem. Why does my image need to leave my browser?

The Canvas API Is All You Need

Modern browsers ship with the Canvas API, which can handle image manipulation natively. No server required. Here's the core idea:

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

// Set target dimensions (e.g., 16:9)
canvas.width = targetWidth;
canvas.height = targetHeight;

// Draw blurred background
ctx.filter = 'blur(20px)';
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
ctx.filter = 'none';

// Draw original image centered
const scale = Math.min(canvas.width / img.width, canvas.height / img.height);
const x = (canvas.width - img.width * scale) / 2;
const y = (canvas.height - img.height * scale) / 2;
ctx.drawImage(img, x, y, img.width * scale, img.height * scale);
Enter fullscreen mode Exit fullscreen mode

That's essentially it. The browser does all the heavy lifting.

What I Built

I turned this into Image Landscape Converter — a free tool that converts portrait images to landscape format entirely in the browser.

Key features:

  • Choose aspect ratio: 16:9, 4:3, or custom
  • Background options: blur, solid color, or transparent
  • Batch processing — convert multiple images at once
  • Works offline once loaded
  • Zero dependencies — vanilla JS only

Why No Server?

The upload-process-download model has real costs:

  1. Privacy: Your images leave your device. Maybe it's a client mockup, maybe it's a private photo. Why trust a random server?
  2. Speed: Network round-trips are always slower than local processing
  3. Reliability: No server means no downtime, no rate limits, no "please try again later"

The entire tool is ~50KB of vanilla JavaScript. No React, no build tools, no npm packages. The File API reads your image, the Canvas API transforms it, and URL.createObjectURL() generates the download link. Your data stays in your browser's memory the whole time.

The "No AI" Part

I put this in the title deliberately. Changing an image's aspect ratio is not a machine learning problem — it's basic coordinate math. The trend of marketing everything as "AI-powered" dilutes the term. When a tool genuinely doesn't need AI, I think it's worth saying so.

Technical Gotchas

A few things I ran into while building this:

Canvas size limits: Mobile browsers have max canvas dimensions (~4096px on some devices). I added fallback scaling for large images.

CORS with drag-and-drop: If you're loading images from URLs, you'll hit CORS issues. Stick with File API for local files — no CORS headaches.

Blob URLs and memory: createObjectURL() creates memory references that don't get garbage collected automatically. Always call revokeObjectURL() when done.

const url = URL.createObjectURL(blob);
downloadLink.href = url;
// After download:
URL.revokeObjectURL(url);
Enter fullscreen mode Exit fullscreen mode

Quality vs. file size: canvas.toBlob() accepts a quality parameter for JPEG. I default to 0.92 — good balance between quality and size.

Try It

If you need to convert portrait images to landscape — for social media, presentations, or anything else — give it a try: imagelandscapeconverter.online

The source is all client-side, so you can inspect exactly what it does. No tracking, no analytics, no cookies.

Happy to answer any questions about the Canvas API approach or browser-side image processing in general.

Top comments (0)