Build a Local Canvas Alpha Sampler for PNG Cutouts

Inspect one pixel without uploading the image

A checkerboard preview helps reveal a cutout's empty background, but it does not tell you the exact opacity of a particular edge pixel. A small browser utility can answer that narrower question. This tutorial reads a selected PNG locally, samples one coordinate and reports its color channels and alpha value.

This is a diagnostic tool for a developer reviewing an exported asset. It does not remove backgrounds or decide whether an edge looks natural. If the workflow starts with background removal, prepare the image with RemovePhotoBG, keep the source photograph and inspect the downloaded cutout separately.

Add a local browser module

Save the following as app.js in your own browser project and load it through the project's normal module entry point. Serve the project locally and open that page in a browser. The module adds a file selector, coordinate inputs and a result area. It makes no network request and does not upload the selected file.

export async function samplePng(file, x, y) {
  if (!file || file.type !== "image/png") throw new Error("Choose a PNG file.");
  if (![x, y].every(Number.isSafeInteger)) throw new Error("Use whole-number coordinates.");
  const bitmap = await createImageBitmap(file);
  try {
    // An example application limit, not a recommended storefront image size.
    if (bitmap.width * bitmap.height > 4_000_000) throw new Error("Image exceeds this demo's pixel limit.");
    if (x < 0 || y < 0 || x >= bitmap.width || y >= bitmap.height) {
      throw new Error("Coordinates are outside the image.");
    }
    const canvas = document.createElement("canvas");
    canvas.width = bitmap.width;
    canvas.height = bitmap.height;
    const context = canvas.getContext("2d");
    if (!context) throw new Error("Canvas 2D is unavailable.");
    context.drawImage(bitmap, 0, 0);
    const [r, g, b, alpha] = context.getImageData(x, y, 1, 1).data;
    return { r, g, b, alpha, opacity: alpha / 255 };
  } finally {
    bitmap.close();
  }
}

function mount() {
  const form = document.createElement("form");
  const picker = document.createElement("input");
  picker.type = "file";
  picker.accept = "image/png";
  picker.setAttribute("aria-label", "PNG file");
  const fields = ["x", "y"].map(name => {
    const label = document.createElement("label");
    label.textContent = name.toUpperCase() + " coordinate ";
    const input = document.createElement("input");
    input.type = "number";
    input.min = "0";
    input.step = "1";
    input.value = "0";
    input.required = true;
    label.append(input);
    form.append(label);
    return input;
  });
  const button = document.createElement("button");
  button.textContent = "Read pixel";
  button.type = "submit";
  const output = document.createElement("pre");
  output.setAttribute("aria-live", "polite");
  form.prepend(picker);
  form.append(button);
  document.body.append(form, output);
  form.addEventListener("submit", async event => {
    event.preventDefault();
    button.disabled = true;
    try {
      const result = await samplePng(
        picker.files?.[0], Number(fields[0].value), Number(fields[1].value)
      );
      output.textContent = JSON.stringify(result, null, 2);
    } catch (error) {
      output.textContent = error instanceof Error ? error.message : "Unable to read image.";
    } finally {
      button.disabled = false;
    }
  });
}

if (typeof document !== "undefined") {
  if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", mount, { once: true });
  else mount();
}

Coordinates refer to the original decoded image, beginning at the upper-left corner. They are not CSS display coordinates. Start at the corner of a simple test image, then choose a location inside the subject using coordinates from your image editor.

Understand the result

Canvas getImageData reads a rectangular region from the canvas. Here that region is a single pixel. In the default byte representation, the returned channels are red, green, blue and alpha. An alpha value of zero is transparent; the maximum byte value is opaque. Dividing alpha by 255 expresses the same opacity on a zero-to-one scale.

The demo rejects coordinates outside the image before reading. That matters because sampling outside a canvas can otherwise produce a transparent result that looks like evidence about the image. Its pixel-count cap is an application limit for this example, not a universal recommendation for product photographs. Decoding happens before that check, so this is not a hardened validator for untrusted server uploads.

Test behavior and failure cases

Create a tiny PNG fixture with a fully transparent corner, an opaque colored patch and a partly transparent patch. Sample all three. Confirm that changing the coordinates changes the result as expected and that the opaque patch returns the chosen color within your editor's color-management behavior.

Try a negative coordinate, a fractional coordinate and a coordinate equal to the image width. Each should be rejected. Try a damaged PNG and check that an error is displayed and the button becomes usable again. The bitmap is closed even when drawing or reading fails.

Keep the inspection in context

A partly transparent edge may be intentional antialiasing, a soft shadow or translucent material. One sampled pixel cannot distinguish those cases. Compare the export against the original photograph and place it on both light and dark backgrounds before changing the mask.

This example decodes a file selected by the reader. If you extend it to fetch remote images, review the canvas cross-origin rules. A readable image on a web page does not automatically grant permission to read its canvas pixels. Keep the diagnostic result specific: which file, which coordinate and what opacity was observed.