https://jsokit.com/blog/tags/image/ Recent content in Image on JsonKit Blog Hugo en © 2025 JsonKit Sat, 02 May 2026 12:32:23 +0000 https://jsokit.com/blog/posts/sprite-sheet-splitter-connected-component-labeling-and-browser-side-zip-packaging/ Sat, 02 May 2026 12:32:23 +0000 https://jsokit.com/blog/posts/sprite-sheet-splitter-connected-component-labeling-and-browser-side-zip-packaging/ Sprite Sheet Splitter: Connected Component Labeling and Browser-Side ZIP Packaging When working on game development or taking over legacy projects, you often encounter sprite sheets: dozens of small images crammed into one large texture, no metadata, just transparent gaps separating them. The designer says “source files are lost, you’ll have to cut them yourself.” The traditional approach is manual slicing in Photoshop—tedious and error-prone. Let’s automate this. The Core Problem: What Is “One Sprite”? https://jsokit.com/blog/posts/browser-side-ocr-with-tesseractjs-a-webassembly-text-recognition-journey/ Sun, 19 Apr 2026 11:26:42 +0000 https://jsokit.com/blog/posts/browser-side-ocr-with-tesseractjs-a-webassembly-text-recognition-journey/ Browser-Side OCR with Tesseract.js: A WebAssembly Text Recognition Journey I recently needed to add image-to-text functionality to a project. Instead of calling a backend OCR API, I decided to go with a pure frontend solution for privacy and offline support. After diving into Tesseract.js, here’s what I learned. How OCR Actually Works OCR (Optical Character Recognition) transforms image pixels into text. The traditional pipeline: Preprocessing: Grayscale, binarization, noise reduction, skew correction Text detection: Find text regions in the image Character segmentation: Split continuous text into individual characters Feature extraction: Extract feature vectors for each character Character recognition: Match against trained models Tesseract is Google’s open-source OCR engine, originally written in C++. https://jsokit.com/blog/posts/building-a-meta-tag-generator-open-graph-twitter-card-and-seo-optimization/ Thu, 16 Apr 2026 14:08:58 +0000 https://jsokit.com/blog/posts/building-a-meta-tag-generator-open-graph-twitter-card-and-seo-optimization/ Building a Meta Tag Generator: Open Graph, Twitter Card, and SEO Optimization When I added sharing functionality to a project recently, I noticed that the preview images on WeChat and Twitter were always wrong. After digging deeper, I realized these platforms don’t just scrape any content - they follow specific protocols: Open Graph and Twitter Card. I decided to build a meta tag generator to truly understand this system. Open Graph Protocol: The Standard for Social Media Previews Open Graph was proposed by Facebook in 2010 and is now supported by all major social platforms. https://jsokit.com/blog/posts/placeholder-image-generator-from-canvas-api-to-smart-layout-implementation/ Sun, 12 Apr 2026 16:20:53 +0000 https://jsokit.com/blog/posts/placeholder-image-generator-from-canvas-api-to-smart-layout-implementation/ Placeholder Image Generator: From Canvas API to Smart Layout Implementation When developing new features or designing prototypes, we often need placeholder images to fill areas where real images aren’t ready yet. Instead of hunting for images on Unsplash every time, why not build your own placeholder image generator? This article dives deep into the implementation details, covering Canvas binding, adaptive font sizing, grid backgrounds, and more. Why Build a Placeholder Image Generator? https://jsokit.com/blog/posts/linux-ln-command-deep-dive-understanding-hard-links-and-symbolic-links/ Tue, 24 Mar 2026 17:48:39 +0000 https://jsokit.com/blog/posts/linux-ln-command-deep-dive-understanding-hard-links-and-symbolic-links/ Linux ln Command Deep Dive: Understanding Hard Links and Symbolic Links 2026-05-09 12:57 Ever wondered why deleting a file sometimes doesn’t truly remove it? That’s the magic of Linux links. The ln command is one of the core tools in the Linux filesystem arsenal. Understanding it unlocks the secrets of inodes, filesystem architecture, and even how Docker image layers work. Inodes: The Foundation of Links Before diving into ln, we need to understand inodes. https://jsokit.com/blog/posts/canvas-image-watermark-implementation-from-positioning-to-tiled-patterns/ Fri, 27 Feb 2026 11:13:45 +0000 https://jsokit.com/blog/posts/canvas-image-watermark-implementation-from-positioning-to-tiled-patterns/ Canvas Image Watermark Implementation: From Positioning to Tiled Patterns Adding watermarks to images is a common requirement—copyright protection, brand visibility, you name it. Recently built an online watermark tool, and here’s how it works under the hood. The Essence of Watermarks It boils down to layering semi-transparent text or graphics over an image. Core code: const canvas = document.createElement('canvas') const ctx = canvas.getContext('2d') ctx.drawImage(img, 0, 0) // Draw original image first ctx. https://jsokit.com/blog/posts/from-bitmap-to-vector-implementing-k-means-color-quantization-and-contour-tracing/ Thu, 26 Feb 2026 17:44:31 +0000 https://jsokit.com/blog/posts/from-bitmap-to-vector-implementing-k-means-color-quantization-and-contour-tracing/ From Bitmap to Vector: Implementing K-Means Color Quantization and Contour Tracing I needed to convert some PNG icons to SVG for a project. Tried a few online tools—either poor quality or paywalled. So I built my own and dove into the core algorithms of image vectorization. Bitmap vs Vector: The Fundamental Difference Bitmaps (PNG/JPG) store pixel color values. Scale them up, they blur. Vectors (SVG) store mathematical paths. Scale infinitely, stay sharp. https://jsokit.com/blog/posts/ico-file-format-demystified-building-a-png-to-ico-converter-from-scratch/ Thu, 26 Feb 2026 15:44:31 +0000 https://jsokit.com/blog/posts/ico-file-format-demystified-building-a-png-to-ico-converter-from-scratch/ ICO File Format Demystified: Building a PNG to ICO Converter from Scratch I recently needed to add favicon generation to a project. Thought I could just rename a PNG to .ico and call it a day. Nope. ICO is a proper binary container format with its own structure. Here’s what I learned. ICO Structure: Not Just a Renamed Image An ICO file is a container that holds multiple icon images at different sizes. https://jsokit.com/blog/posts/image-to-ascii-art-pixel-brightness-mapping-algorithm-and-character-set-selection/ Wed, 25 Feb 2026 16:21:49 +0000 https://jsokit.com/blog/posts/image-to-ascii-art-pixel-brightness-mapping-algorithm-and-character-set-selection/ Image to ASCII Art: Pixel Brightness Mapping Algorithm and Character Set Selection Written: May 4, 2026, 19:06 Have you ever seen the Mona Lisa rendered in terminal characters? The core principle of converting images to ASCII art is simpler than you might think—mapping pixel brightness to character density. Brightness Calculation: The Mathematics of Grayscale Each pixel in an image consists of R, G, and B channels, but the human eye’s sensitivity to colors isn’t uniform. https://jsokit.com/blog/posts/image-to-sketch-gaussian-blur-and-color-dodge-blending-with-canvas/ Wed, 25 Feb 2026 14:21:49 +0000 https://jsokit.com/blog/posts/image-to-sketch-gaussian-blur-and-color-dodge-blending-with-canvas/ Image to Sketch: Gaussian Blur and Color Dodge Blending with Canvas I was building an image processing toolkit and needed to convert photos into pencil sketch style. After some research, I found the core principle is surprisingly simple: it’s all about combining Gaussian blur with color dodge blending. The Theory Behind Sketch Effect What characterizes a traditional pencil sketch? Clear lines, strong contrast, white background. In digital image processing, edge detection methods like Sobel operator or Canny algorithm are common.