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: https://github.com/blueimp/JavaScript-Load-Image/commit/1e4df707821a0afcc11ea0720ee403b8759f3881

Fixes #11567

Fixes #11496

* Add WebP support

* Remove the changes to the tooltip

refs: https://github.com/tootsuite/mastodon/pull/9879#pullrequestreview-199312528

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

Fix #7487

- Use URL.createObjectURL (replace from FileReader)
- Use HTMLCanvasElement.prototype.toBlob
  (replace from HTMLCanvasElement.prototype.toDataURL)
- Use Promise (replace callback interface)