DEV Community: David Miller

Map a displayed crop rectangle into intrinsic image coordinates

David Miller — Wed, 04 Nov 2026 04:00:15 +0000

A crop picker often displays an image smaller than its source. If the picker reports a rectangle in displayed coordinates, passing those numbers directly to drawImage() selects the wrong part of the source. Scale the selection into intrinsic image coordinates first.

For an HTMLImageElement, drawImage() uses intrinsic dimensions. image.width can describe a displayed size, so use naturalWidth and naturalHeight when calculating the source rectangle. See MDN's drawImage notes.

Assume the entire decoded image is displayed in a 600 by 400 coordinate area. Its intrinsic dimensions are 2400 by 1600. A selection beginning at displayed point (150, 100), with displayed width 300 and height 200, maps to source point (600, 400), width 1200 and height 800.

This helper performs the scaling. The rectangle must already be relative to the displayed image content, excluding borders, padding, and any letterboxing. All arguments are numbers.

function sourceRect(image, rect, shownWidth, shownHeight) {
  const values = [rect.x, rect.y, rect.width, rect.height,
    shownWidth, shownHeight];
  if (!values.every(Number.isFinite) ||
      shownWidth <= 0 || shownHeight <= 0 ||
      image.naturalWidth <= 0 || image.naturalHeight <= 0 ||
      rect.x < 0 || rect.y < 0 ||
      rect.width <= 0 || rect.height <= 0 ||
      rect.x + rect.width > shownWidth ||
      rect.y + rect.height > shownHeight) {
    throw new RangeError("Selection must be inside a loaded image");
  }
  const scaleX = image.naturalWidth / shownWidth;
  const scaleY = image.naturalHeight / shownHeight;
  return {
    x: rect.x * scaleX,
    y: rect.y * scaleY,
    width: rect.width * scaleX,
    height: rect.height * scaleY,
  };
}

Use the result as the four source arguments in the nine-argument drawImage() overload. Choose the destination width and height separately; those describe the output canvas region, not the selection in the original image.

This helper does not translate pointer coordinates or model CSS transforms. A picker using object-fit: contain must first locate the actual image rectangle inside its element. A rotated or mirrored preview also needs its own inverse mapping. Resolve those layout details before calling the helper.

Put a different mark near each corner of a test image. Select one corner in the reduced preview and inspect the resulting crop. Then repeat at another corner to catch an incorrect offset.

Validate a contained pixel rectangle before reading a canvas crop

David Miller — Tue, 03 Nov 2026 02:40:26 +0000

A crop rectangle needs a stated coordinate space. If an application requires a rectangle fully inside the drawing buffer, check that requirement before calling getImageData().

The browser API can return transparent black for the part of a requested rectangle outside the canvas. A stricter application rule can reject that rectangle instead. This example accepts only positive, integer-sized rectangles with nonnegative integer origins.

function containedPixelRect(rect, canvasWidth, canvasHeight) {
  if (rect === null || typeof rect !== 'object') {
    throw new TypeError('Expected a rectangle object');
  }
  const { x, y, width, height } = rect;
  const values = [x, y, width, height, canvasWidth, canvasHeight];
  if (!values.every(Number.isSafeInteger) ||
      x < 0 || y < 0 || width <= 0 || height <= 0 ||
      canvasWidth <= 0 || canvasHeight <= 0 ||
      x > canvasWidth - width || y > canvasHeight - height) {
    throw new RangeError('Rectangle must fit inside the drawing buffer');
  }
  return { x, y, width, height };
}

const rect = containedPixelRect(
  { x: 10, y: 5, width: 20, height: 15 }, 100, 80
);
// In browser code, after obtaining a 2D context:
// const pixels = ctx.getImageData(rect.x, rect.y, rect.width, rect.height);

Use the canvas drawing-buffer dimensions for this check. A rectangle expressed in displayed CSS coordinates needs to be mapped into that coordinate space first. Perform that mapping before using this validator.

Passing the numeric check also does not grant permission to read a canvas containing restricted cross-origin image content. Handle the actual read failure at the call site. Keep that failure distinct from a rejected rectangle so a report can say which condition stopped the operation.

I work on Morphio. For an image crop request associated with that project, I would state the coordinate space and the containment rule with the rectangle values.

API reference: getImageData().

Do not treat image complete as a successful decode result

David Miller — Mon, 02 Nov 2026 00:32:15 +0000

HTMLImageElement.complete can be true for a broken image. It can also be true when the element has no source, so it cannot establish that an image loaded successfully.

For an image-processing step, handle the operation you actually need. If the next step requires decoding, await decode() and handle rejection before replacing the preview. Keep the selected job identifier available when your application allows another file to be chosen during that wait.

The following is an illustrative boundary around an existing image element:

async function requireDecodedImage(image) {
  await image.decode();
  return image;
}

Handle rejection in the caller. A rejected promise should leave the previous preview intact when that is the intended interface behavior. Do not label an export ready merely because an earlier complete check returned true.

Keep load or decode status separate from the later canvas drawing and export result. Successful decoding does not establish that every subsequent operation will succeed. Name the failing stage in the interface so a missing image and a failed export are distinguishable.

Reference: MDN complete.

Label File.lastModified as a file timestamp in an image list

David Miller — Sun, 01 Nov 2026 02:43:29 +0000

Keep the label for File.lastModified specific: it is a file modification timestamp. A photograph's capture time needs a separate source.

The value is a number of milliseconds since the Unix epoch. You can format it with new Date(file.lastModified).toISOString() when a UTC display suits the interface. Keep the numeric value in the job record if later comparisons depend on it.

A file created in JavaScript can receive an explicit lastModified option. When that option is omitted, it is normally assigned the current time at creation; this makes it unsuitable as proof of when the image was photographed. A file without a known modification date can also report the current date.

Keep any capture date under a separate field with its own source and uncertainty. Leave a missing capture date empty instead of substituting the file timestamp. If the user is comparing two exports, identify which timestamp was inspected and which file it belongs to.

I work on Morphio and write about browser image workflows. This distinction concerns the file record and does not claim that a conversion tool preserves or reads camera metadata. Reference: MDN File.lastModified.

Let the browser set the multipart boundary for an image upload

David Miller — Sat, 31 Oct 2026 07:41:15 +0000

Leave Content-Type unset in the request options when fetch() sends FormData. The browser adds the multipart boundary needed by that body.

Build the form with const data = new FormData(); data.append("image", file); and pass it as the request body. A manually supplied Content-Type: multipart/form-data omits the boundary that the browser normally adds. Apply this rule to requests whose body is FormData.

Check a shared request helper for an unconditional JSON or multipart header before blaming the image bytes. Keep any authorization headers your application actually requires. Inspect the request and the server's response using a small non-sensitive test image.

The MDN FormData guide explains the boundary requirement. In a bug report, identify the body type and header construction without copying credentials into the report.

I work on Morphio, our image project at https://morphio.online/. These notes describe image preparation and review; they do not require a particular editing tool.

Keep the filename separate when appending a Blob to FormData

David Miller — Fri, 30 Oct 2026 03:47:49 +0000

Keep a Blob's uploaded filename explicit in FormData. A plain Blob has no File name, so supply the name as append()'s third argument. The Blob contains data and a type, but has no File name.

The third argument to append() supplies the name reported to the server. For example, form.append("image", blob, "preview.png") names the uploaded part. The default name for a plain Blob is "blob"; a File uses its own filename unless another is supplied.

Choose the extension from the output format you actually produced. Giving the part a .png name does not convert its bytes. When reading the server's upload report, check the field name image and filename preview.png separately.

Test with a small sample and inspect the name the server receives. Keep server-side validation in place; a supplied filename is descriptive metadata.

Source: MDN FormData.append().

Treat a file input accept attribute as a chooser hint

David Miller — Thu, 29 Oct 2026 02:33:47 +0000

An image file input still needs validation when it has an accept attribute. The attribute supplies a picker hint; it does not verify the chosen file.

For an image form, accept="image/*" can make selection easier, while the application still needs to check the file it receives. Keep the destination's supported formats explicit in the interface instead of treating the broad image filter as its complete policy.

Validate the expected requirement on the server too. Keep server validation in place when adding a client-side selection check. If the destination rejects a file, preserve its error rather than treating the presence of an image extension as proof of acceptance.

Test a supported sample and a deliberately unsuitable sample through the same form. Record the selected filename and the actual response for each attempt.

Source: MDN accept.

I work on Morphio, and this note is part of the image-workflow guidance I maintain.

Compare image file limits in bytes before formatting the size

David Miller — Wed, 28 Oct 2026 02:22:02 +0000

Check an image file against the exact byte limit before rounding its size for display. File.size supplies the byte count used by that comparison.

Keep the limit as a number in the validation code. For a hypothetical form with a stated limit of 2,000,000 bytes, the condition file.size > 2_000_000 rejects files above that value. Equality remains accepted under that particular rule. Use the destination's actual requirement instead of assuming what its MB label means.

Format a separate value for the interface after the comparison. Keep the unit clear if you display decimal megabytes or binary mebibytes. A file that rounds to the displayed limit can still exceed the exact byte count.

This check establishes only the local size comparison. The destination can reject an upload for another reason. Preserve its error message and check the accepted preview separately.

Source: MDN Blob.size.

Match settled image jobs to their original inputs

David Miller — Tue, 27 Oct 2026 04:19:22 +0000

Pair Promise.allSettled() outcomes with a captured copy of the input list. The records keep input order even when an image job started earlier finishes later.

Use the status field before reading a result. A fulfilled record has a value; a rejected record has a reason. Keep the corresponding source identifier with either kind of record so a failed image job is not silently removed from the batch report.

The returned order does not impose a concurrency limit or establish that a produced image was downloaded by the user. Those are separate parts of the workflow. If the interface permits another selection while work runs, keep the running batch's list unchanged.

Before showing the summary, compare the number of outcome records with the captured input list. Display failures alongside successful jobs, with wording that describes what the application actually confirmed.

Reference: MDN Promise.allSettled()

Published by Morphio as part of our practical image workflow notes.

Release an image preview object URL when its owner removes it

David Miller — Mon, 26 Oct 2026 00:34:39 +0000

Keep each object URL with the image preview that owns it. Release the URL when that preview is removed and its consumers no longer need it.

Calling URL.revokeObjectURL() releases the object URL created by URL.createObjectURL(). Revoking a URL as soon as it is assigned can be too early if user interactions still need it.

When replacing a preview, give the new preview its own URL and retire the previous one according to the same ownership rule. Include cleanup when the containing view is closed.

Reference: MDN revokeObjectURL()

Give same-named image files separate batch IDs

David Miller — Sun, 25 Oct 2026 04:37:25 +0000

Assign image-batch rows identifiers that do not depend on File.name being unique. MDN documents that name excludes the path. A name does not establish that two selected files are the same file.

Assign the row IDs when accepting the batch. Display the original filename separately.

function makeBatch(files, batchId) {
  return Array.from(files, (file, index) => ({
    id: `${batchId}:${index}`,
    file,
    displayName: file.name,
    status: "pending"
  }));
}

The caller must supply a batchId that is unique among batches retained by the application. The index distinguishes rows within that batch. It is not a content hash and does not deduplicate files.

Use the row ID to attach each result or error to its input. Reordering the visible list should not change the ID assigned when the row was created.

I work on Morphio, an image conversion project. The bookkeeping pattern here is a design suggestion. It does not describe the project's implementation.

Reference: MDN File.name

Reject invalid output sizes before assigning canvas.width

David Miller — Sat, 24 Oct 2026 03:33:56 +0000

Validate the requested dimensions before changing a canvas. Decide which sizes your application accepts, and report an invalid request before it changes the preview.

This example accepts numbers and numeric strings. After conversion, each side must be an integer from 1 to 4096. The cap is a sample application policy, not a portable limit for browsers.

function checkedSide(value) {
  const n = Number(value);
  if (!Number.isSafeInteger(n) || n < 1 || n > 4096) {
    throw new RangeError("Output side must be an integer from 1 to 4096");
  }
  return n;
}

function makeOutputCanvas(width, height) {
  const w = checkedSide(width);
  const h = checkedSide(height);
  const canvas = document.createElement("canvas");
  canvas.width = w;
  canvas.height = h;
  return canvas;
}

The function checks both inputs before creating an output canvas. Passing an empty string fails because it converts to zero. Passing "512" succeeds. If your form requires a stricter text format, replace that conversion rule with the parsing policy you intend to support.

Creating a separate output canvas leaves the existing preview alone. Setting the width of an existing canvas clears its buffer and resets the drawing context, even if you assign its current width again.

A valid request can still fail later. Choose limits with the total pixel count and concurrent work in mind, and handle errors when you obtain a context or export the result. The integer check alone does not establish that the browser can allocate the image.

Reference: MDN canvas.width