Hi, first of all, great work on the new Edge. The preview is a joy to work with on my Mac.
I'm the senior frontend dev at befunky.com, an online photo editor based on WebGL. We currently generate image blobs for downloading using canvas.toBlob or .toDataURL, both of which suffer from a major subsampling issue in Chromium. I submitted a bug report to the Chromium team a few weeks ago, but haven't heard back. The fix is trivial (a one-liner implemented by Firefox several years ago), and it would be wonderful to have in the new Edge.
Chromium bug report: https://bugs.chromium.org/p/chromium/issues/detail?id=972180
Steps to reproduce the problem:
1. Draw image containing text to Canvas.
2. Use toBlob or toDataURL to export Canvas as JPEG with quality under 100% (e.g. 0.99).
3. The text in the exported blob/base64 image will be blurry, even at 99% quality.
Codepen (reduced test case)
https://codepen.io/pranksinatra/pen/yWWgEV
Bug in our (live) Photo Editor (please open in incognito to avoid auto-saving issues)
https://www.befunky.com/create/?openurl=https://i.ibb.co/9GMbw2z/text-sample.png
What is the expected behavior?
JPEG images exported above a certain quality threshold (e.g. 50% in Photoshop, 90% in Firefox) should have chroma subsampling turned off, or at least reduced, to avoid blurring edges.
Firefox source:
https://dxr.mozilla.org/mozilla-central/source/image/encoders/jpeg/nsJPEGEncoder.cpp#173
At high quality levels, other optimizations are still applied, so the user can see considerable benefits in image compression w/out subsampling. For instance, the given image (in the CodePen) is reduced in size by 10% at 99% quality and 50% at 93% quality in Firefox, with no notable blurriness.
What went wrong?
Chromium currently only disables subsampling at 100% quality.
Source:
https://chromium.googlesource.com/chromium/blink.git/+/master/Source/platform/image-encoders/skia/JP...
Thus, users must choose between saving absurdly large, crisp images (JPEG 100% or PNG) and reasonably sized, but blurry (JPEG 80-99%) images. Even disabling subsampling at 95% quality would be a boon to our users.
I'm happy to provide more examples/resources if any of this is unclear! Thanks for all your work on the web platform. Just hoping for saner defaults & cross browser consensus on this.
As a side note, we have explored using a JS library (on the main thread or in web workers) or WebAssembly for compressing JPEG (w/out subsampling), but all of these solutions are far slower (2-3x) than the native canvas toBlob and toDataURL methods which are built for this use case.
