Jun 27 2019 09:34 AM
Jun 27 2019 09:34 AM
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)
Bug in our (live) Photo Editor (please open in incognito to avoid auto-saving issues)
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.
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.
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.
Jun 28 2019 06:03 PM
We appreciate you taking the time to go into great detail about the issue, and even giving repo steps.
I will try and make sure the right teams that handle these issues take a look at this
information as soon as possible.
Thanks for your patience and feedback,
Sep 24 2020 01:56 PM
The Chrome has created an issue for this on WHATWG (web standards repo)
If Microsoft could chime in, that'd be great. Just trying to get sense for what implementers think of this issue. It would improve the Canvas API for many web-based image manipulation tools, including our own.