Do not treat image complete as a successful decode result

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.