Check the result of an image export before assigning its download filename. An encoder can return a different format from the one requested by the interface, leaving the next application with a misleading extension.
For a canvas export, toBlob() accepts a requested MIME type. When that type is unsupported, the browser falls back to PNG. The callback can also receive null when an image cannot be created. Handle a fallback as a different output type. Handle null as a failure to produce an output Blob.
Keep the request and result separate
Keep the requested format in one variable and inspect the returned Blob's type after encoding. Use that comparison to decide whether the result matches the user's request. If the application requires a specific format, show a useful failure rather than silently changing the requirement.
If a fallback is acceptable, explain it in the interface and use the matching filename. Do not create a file called portrait.avif simply because the user selected AVIF before an encoder returned PNG. A filename assignment cannot convert bytes that have already been encoded.
Be careful about what the type check establishes. Reading the type attached to a Blob returned by an encoder helps you handle that encoder's result. Reading the type of an arbitrary uploaded File is a different situation: its reported MIME type is not a general inspection of its contents. Keep receiving-side validation for files arriving from outside the application.
Test the downloaded result
Open the downloaded file in the destination that needs it. Check the image dimensions and framing as well as the format. Export success does not show that a cropped edge or a small label survived the workflow.
I work on Morphio, which provides separate HEIC conversion tools. The same distinction is useful when checking a conversion workflow: record the requested output, inspect the resulting file, and try that copy in the receiving application. This canvas discussion does not imply that a browser can decode every HEIC input natively.
Keep the failure states visible in the interface. A missing Blob should not enable a download button. An unexpected output type should not be presented as the requested format. When the result is usable, keep its actual type with the object until the download filename is assigned.
Top comments (0)