Photo to Coloring Page Converter converts digital photographs into clean black-and-white line art suitable for printable coloring pages. It uses client-side Sobel spatial gradient convolution filters to detect object boundaries, eliminate color shading, and generate high-contrast contour drawings for kids, classrooms, and craft projects.

### Edge Detection Mathematics The conversion pipeline processes pixel data directly inside an HTML5 canvas element: - **Proportional Scaling:** If the uploaded image width or height exceeds 1200 pixels, it is downscaled proportionally to fit within a 1200-pixel bounding box. - **Luminance Extraction:** Color pixels are converted to an 8-bit perceptual grayscale buffer using the standard luminosity formula: Gray = 0.299R + 0.587G + 0.114B. - **Sobel Spatial Convolution:** 3×3 convolution kernels compute the horizontal derivative (gx) and vertical derivative (gy) at every interior pixel. - **Edge Magnitude Calculation:** Combined edge strength is computed as Math.sqrt(gx² + gy²) * (edgeStrength / 2). - **Binary Thresholding:** Pixels with edge magnitude exceeding your selected threshold value are painted solid black ([0, 0, 0, 255]); all other pixels are rendered as pure white paper ([255, 255, 255, 255]).

### Worked Example: Pet Portrait Outline Conversion Suppose you want to convert a 2400 × 1600 pixel family dog photograph into a printable coloring page: 1. **Upload Source Image:** Select dog-portrait.jpg (2400 × 1600 px). 2. **Dimension Resizing:** The image scales to 1200 × 800 pixels (maintaining the 3:2 aspect ratio across 960,000 pixels). 3. **Filter Configuration:** Set Edge Threshold to 42 and Line Strength to 3. 4. **Calculations on Sample Boundary:** - A fur-to-background transition pixel produces horizontal gradient gx = 28 and vertical gradient gy = -36. - Combined magnitude: Math.sqrt(28² + (-36)²) * (3 / 2) = Math.sqrt(784 + 1296) * 1.5 = Math.sqrt(2080) * 1.5 ≈ 45.61 * 1.5 = 68.41. - Because 68.41 > 42, the pixel is classified as an edge and assigned pure black ([0, 0, 0, 255]). - A flat carpet area with gx = 4 and gy = 2 produces magnitude Math.sqrt(20) * 1.5 ≈ 6.71, below the 42 threshold, rendering as white background ([255, 255, 255, 255]). 5. **Exporting Line Art:** Click Download PNG to save coloring-page-outline.png (1200 × 800 px, 142 KB), or click Printable A4 PDF to compile an A4 document with 10 mm print margins in 95 ms.

### In-Browser Processing Details All convolutional edge detection and PDF page compilation occur entirely inside your browser using the HTML5 Canvas 2D context and client-side jsPDF library. Your personal photographs remain on your local hardware and are never uploaded to cloud servers.