I Built a Browser-Based Tool That Turns Photos Into Cross-Stitch Patterns

Taylorjojo — Tue, 01 Sep 2026 17:11:41 +0000

Turning a photo into a usable cross-stitch pattern sounds simple:

Resize the image
Reduce the number of colors
Draw a grid
Export the result

But I quickly discovered that a visually recognizable image is not necessarily a practical pattern.

A usable cross-stitch chart also needs a manageable color palette, readable symbols, material estimates, sensible dimensions, and as few isolated “confetti” stitches as possible.

That challenge led me to build PhotoToPattern, a free browser-based tool that converts photos into printable cross-stitch patterns.

👉 Try PhotoToPattern

What the tool does

Users can upload a JPG, PNG, or WebP image and adjust:

Stitch-grid width
Maximum number of colors
Fabric count
Number of thread strands
Brightness, contrast, and saturation
Image crop
Background removal
Speckle-cleanup strength
Included or excluded DMC colors

The generated result includes:

A color preview
A printable symbol chart
DMC floss codes
Stitch counts
Estimated skein quantities
Finished-size estimates
Pattern difficulty and estimated stitching time
PDF, PNG, and CSV exports

No account is required.

Keeping image processing in the browser

One of my main design decisions was to process uploaded images locally.

Photos can be personal, so uploading every image to a server felt unnecessary. The browser already provides the APIs needed to decode, resize, sample, and render images.

The basic pipeline looks like this:

Uploaded image
      ↓
Crop and image adjustments
      ↓
Canvas-based pixel sampling
      ↓
Perceptual color reduction
      ↓
DMC palette matching
      ↓
Speckle cleanup
      ↓
Symbol and material generation
      ↓
PNG / PDF / CSV export

Because the conversion happens locally, the original image does not need to leave the user’s device.

It also reduces server-side storage and processing requirements.

Matching pixels to real thread colors

A cross-stitch pattern cannot use arbitrary RGB values. Each color needs to correspond to thread that someone can actually buy.

The tool therefore maps sampled image colors to a DMC floss palette.

Simple RGB distance produced some noticeably incorrect matches, especially around muted colors and similar shades. I switched to perceptual color comparison using LAB color space and CIEDE2000.

In simplified form:

const matchedColor = findNearestPaletteColor({
  sourceColor,
  palette: dmcColors,
  algorithm: "ciede2000",
});

This is more computationally expensive than basic RGB distance, but it generally produces matches that are closer to how people perceive color differences.

Reducing colors without losing the subject

Using too many colors makes a photo pattern expensive and difficult to stitch. Using too few can remove important details.

Instead of treating every pixel color equally, the palette reduction needs to preserve colors that:

Cover significant areas
Help separate the subject from the background
Represent visually distinct regions
Are important to the overall composition

The user can choose a maximum palette size and exclude specific DMC colors before rebuilding the chart.

This makes the result editable instead of presenting the first generated output as the final answer.

The confetti-stitch problem

Photo conversions often create isolated pixels surrounded by unrelated colors. Stitchers commonly call these “confetti stitches.”

They may improve pixel-level similarity, but they make a physical project much more frustrating.

PhotoToPattern includes adjustable cleanup that replaces small isolated regions with suitable neighboring colors.

The interesting lesson here was that optimizing for image accuracy and optimizing for usability are not the same thing.

A slightly less accurate preview can produce a much better pattern.

Rendering readable charts

A complete pattern may contain thousands of cells, so rendering it as regular React elements would create a large DOM.

Canvas is a better fit for the grid and preview:

It handles dense cell rendering efficiently
Zooming and panning do not require thousands of elements
The same rendering logic can support previews and exports
Large charts can be divided into readable tiles

Each DMC color is also assigned a symbol, so the printed chart does not depend on color alone.

Exporting something people can actually use

Generating an attractive preview is only half of the product.

The PDF export includes:

Pattern dimensions
Fabric and strand settings
Finished-size estimates
Color preview
DMC material list
Full-chart reference
Tiled symbol-chart pages

Users can also download individual PNG files or a CSV material list.

What I learned

The biggest lesson was that converting an image into a craft pattern is a constraint problem, not just an image-filter problem.

The output has to balance:

Visual similarity
Number of colors
Physical material availability
Chart readability
Stitching difficulty
Export quality
User privacy

There is still plenty I want to improve, particularly around palette optimization, background separation, and making complex photos easier for beginners.

You can try the current version here:

👉 PhotoToPattern — Free Photo to Cross-Stitch Pattern Maker

I would especially appreciate feedback on:

Whether the generated charts are easy to read
Which editing controls are missing
Whether the DMC color matches feel accurate
What other craft-pattern formats would be useful

Thanks for taking a look!

DEV Community: Taylorjojo