Image Preprocessing Before Sending a Photo to a Try-On API

Before you send a photo to a try-on API, fix its orientation, resize it to a sensible width, convert it to JPEG or PNG and check that the whole body is visible. Doing this in the browser keeps uploads fast and avoids failed or wasted renders.

This guide is for developers building on a virtual try-on API. The format and size notes come from the ZeDaq.ai API reference, which says photos are sent as base64 JPEG or PNG, and that a full-length photo around 800 pixels wide works well.

What does the API expect?

For POST /api/v1/tryon, the docs describe two images: the shopper's photo and your product image. Both are base64 strings. JPEG and PNG are the listed formats. The garment_type field is optional, with values upper_body, lower_body or dresses.

Send the request from your server, with the x-api-key header. Do not place a secret key in browser code.

How do you fix EXIF orientation?

Phones often save a photo sideways and record the correct rotation in EXIF metadata. Some code ignores that tag, so the person appears turned on their side. MDN documents the image-orientation property, and browsers can apply the EXIF rotation when they decode an image.

The simplest fix is to draw the image onto a canvas and export from there. The exported file is the right way up, and the old metadata is dropped.

1. Load the file into an image element.
2. Draw it onto a canvas.
3. Export with canvas.toBlob.

How do you resize and compress?

Large phone photos waste upload time and add nothing the API can use. Resize to around the width the docs mention.

async function prepare(file, targetWidth = 800) {
  const bitmap = await createImageBitmap(file, { imageOrientation: "from-image" });
  const scale = Math.min(1, targetWidth / bitmap.width);
  const canvas = document.createElement("canvas");
  canvas.width = Math.round(bitmap.width * scale);
  canvas.height = Math.round(bitmap.height * scale);
  canvas.getContext("2d").drawImage(bitmap, 0, 0, canvas.width, canvas.height);
  return await new Promise((resolve) => canvas.toBlob(resolve, "image/jpeg", 0.9));
}

Do not enlarge small photos. The Math.min(1, ...) stops that. Keep the aspect ratio the same.

How do you convert formats?

Shoppers may upload HEIC from iPhones, or WebP from other sources. The API lists JPEG and PNG. Exporting from a canvas as JPEG solves it for any format the browser can decode.

Your own product images may be WebP or AVIF on your site. Convert a copy to JPEG or PNG before sending. For format trade-offs, read WebP and AVIF for clothing photos.

What should you check before you send?

Check on the shopper's device, before upload, so nothing is wasted.

• Is a person visible? Show an error if not.
• Is the full body in frame? The docs describe a full-length photo.
• Is the photo sharp and lit? Ask for a retake if it is dark or blurry.
• Is the file a real image? Reject other file types.

Good prompts on screen cut retakes. Tell shoppers to stand straight, face the camera and wear fitted clothes. Our guide on what product images virtual try-on needs covers the product side.

How do you test your preprocessing?

Test with the photos real shoppers take, not studio shots.

1. Take portrait and landscape photos on an iPhone and an Android phone.
2. Try a photo from the gallery as well as one from the camera.
3. Upload a very large photo and watch the request time.
4. Upload a photo that is not an image and check the error message.
5. Upload a photo with no person in it.

Keep a small folder of these test photos and run through them after each change to the upload code.

How do you handle privacy?

Tell shoppers what happens to their photo before they upload it. People hesitate when they do not know. See why shoppers hesitate to upload a photo for how to explain it plainly.

Note that sizing works differently. For the scan endpoint, the docs say the photo is not sent: pose detection runs on the device and only measurements are sent.

How does this compare with AR try-on?

Photo-based try-on is a different model from live camera overlays, with its own preparation steps. The article on AR try-on versus AI photo try-on explains the differences.

What should you do after the call?

A render can take a while. The docs say a 202 response means the render is still running, and you should poll the poll_url every 2 seconds until it returns 200. Show a progress state, and handle failures as described in the API error guide. If you use the Shopify app rather than the API, see how to add virtual try-on to Shopify instead.

FAQs

What image formats does the try-on API accept?

The ZeDaq.ai docs list JPEG or PNG, sent as base64.

How wide should the shopper photo be?

The docs say a full-length photo around 800 pixels wide works well. Larger files only add upload time.

Why does the person appear rotated?

The photo's EXIF orientation was ignored. Redraw it onto a canvas and export a fresh file.

Should I preprocess on the server or the browser?

The browser is usually better, because it cuts upload size and lets you ask for a retake right away. Validate again on the server.