Attempting to upload image files that the browser is unable to load results
in “Oops! An unexpected error occurred.”
This commit changes the error handling so that an unprocessable image results
in the file being sent anyway, which might cover a few corner cases, and
provide a slightly better error message.
Some browsers (at least recent Chrome versions) automatically take
image metadata into account when drawing images into a canvas.
There seem to be no way to prevent that behavior, and the only
way to detect it seems to compare with a known image.
See: https://github.com/w3c/csswg-drafts/issues/4666
Solution adapted from: 1e4df70782
To improve the way super tall or super ride images are treated, the
numbers remain the same, 1280x1280 and 400x400, but if an image
is less in one dimension than the other, the other can become larger
Thanks to @WAHa_06x36@mastodon.social for the tip
- Use URL.createObjectURL (replace from FileReader)
- Use HTMLCanvasElement.prototype.toBlob
(replace from HTMLCanvasElement.prototype.toDataURL)
- Use Promise (replace callback interface)
