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

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 / i