Home

JPEG exported from canvas at 99% quality is blurry

%3CLINGO-SUB%20id%3D%22lingo-sub-725445%22%20slang%3D%22en-US%22%3EJPEG%20exported%20from%20canvas%20at%2099%25%20quality%20is%20blurry%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-725445%22%20slang%3D%22en-US%22%3E%3CP%3EHi%2C%20first%20of%20all%2C%20great%20work%20on%20the%20new%20Edge.%20The%20preview%20is%20a%20joy%20to%20work%20with%20on%20my%20Mac.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI'm%20the%20senior%20frontend%20dev%20at%20befunky.com%2C%20an%20online%20photo%20editor%20based%20on%20WebGL.%20We%20currently%20generate%20image%20blobs%20for%20downloading%20using%20canvas.toBlob%20or%20.toDataURL%2C%20both%20of%20which%20suffer%20from%20a%20major%20subsampling%20issue%20in%20Chromium.%20I%20submitted%20a%20bug%20report%20to%20the%20Chromium%20team%20a%20few%20weeks%20ago%2C%20but%20haven't%20heard%20back.%20The%20fix%20is%20trivial%20(a%20one-liner%20implemented%20by%20Firefox%20several%20years%20ago)%2C%20and%20it%20would%20be%20wonderful%20to%20have%20in%20the%20new%20Edge.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EChromium%20bug%20report%3A%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fbugs.chromium.org%2Fp%2Fchromium%2Fissues%2Fdetail%3Fid%3D972180%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fbugs.chromium.org%2Fp%2Fchromium%2Fissues%2Fdetail%3Fid%3D972180%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22line%22%3ESteps%20to%20reproduce%20the%20problem%3A%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%20class%3D%22line%22%3E1.%20Draw%20image%20containing%20text%20to%20Canvas.%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%20class%3D%22line%22%3E2.%20Use%20toBlob%20or%20toDataURL%20to%20export%20Canvas%20as%20JPEG%20with%20quality%20under%20100%25%20(e.g.%200.99).%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%20class%3D%22line%22%3E3.%20The%20text%20in%20the%20exported%20blob%2Fbase64%20image%20will%20be%20blurry%2C%20even%20at%2099%25%20quality.%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%20class%3D%22line%22%3ECodepen%20(reduced%20test%20case)%3C%2FSPAN%3E%3CBR%20%2F%3E%3CA%20href%3D%22https%3A%2F%2Fcodepen.io%2Fpranksinatra%2Fpen%2FyWWgEV%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fcodepen.io%2Fpranksinatra%2Fpen%2FyWWgEV%3C%2FA%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%20class%3D%22line%22%3EBug%20in%20our%20(live)%20Photo%20Editor%20(please%20open%20in%20incognito%20to%20avoid%20auto-saving%20issues)%3C%2FSPAN%3E%3CBR%20%2F%3E%3CA%20href%3D%22https%3A%2F%2Fwww.befunky.com%2Fcreate%2F%3Fopenurl%3Dhttps%3A%2F%2Fi.ibb.co%2F9GMbw2z%2Ftext-sample.png%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fwww.befunky.com%2Fcreate%2F%3Fopenurl%3Dhttps%3A%2F%2Fi.ibb.co%2F9GMbw2z%2Ftext-sample.png%3C%2FA%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%20class%3D%22line%22%3EWhat%20is%20the%20expected%20behavior%3F%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%20class%3D%22line%22%3EJPEG%20images%20exported%20above%20a%20certain%20quality%20threshold%20(e.g.%2050%25%20in%20Photoshop%2C%2090%25%20in%20Firefox)%20should%20have%20chroma%20subsampling%20turned%20off%2C%20or%20at%20least%20reduced%2C%20to%20avoid%20blurring%20edges.%20%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%20class%3D%22line%22%3EFirefox%20source%3A%3C%2FSPAN%3E%3CBR%20%2F%3E%3CA%20href%3D%22https%3A%2F%2Fdxr.mozilla.org%2Fmozilla-central%2Fsource%2Fimage%2Fencoders%2Fjpeg%2FnsJPEGEncoder.cpp%23173%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdxr.mozilla.org%2Fmozilla-central%2Fsource%2Fimage%2Fencoders%2Fjpeg%2FnsJPEGEncoder.cpp%23173%3C%2FA%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%20class%3D%22line%22%3EAt%20high%20quality%20levels%2C%20other%20optimizations%20are%20still%20applied%2C%20so%20the%20user%20can%20see%20considerable%20benefits%20in%20image%20compression%20w%2Fout%20subsampling.%20For%20instance%2C%20the%20given%20image%20(in%20the%20CodePen)%20is%20reduced%20in%20size%20by%2010%25%20at%2099%25%20quality%20and%2050%25%20at%2093%25%20quality%20in%20Firefox%2C%20with%20%3CSTRONG%3Eno%20notable%20blurriness%3C%2FSTRONG%3E.%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%20class%3D%22line%22%3EWhat%20went%20wrong%3F%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%20class%3D%22line%22%3EChromium%20currently%20only%20disables%20subsampling%20at%20100%25%20quality.%20%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%20class%3D%22line%22%3ESource%3A%3C%2FSPAN%3E%3CBR%20%2F%3E%3CA%20href%3D%22https%3A%2F%2Fchromium.googlesource.com%2Fchromium%2Fblink.git%2F%2B%2Fmaster%2FSource%2Fplatform%2Fimage-encoders%2Fskia%2FJPEGImageEncoder.cpp%23100%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fchromium.googlesource.com%2Fchromium%2Fblink.git%2F%2B%2Fmaster%2FSource%2Fplatform%2Fimage-encoders%2Fskia%2FJPEGImageEncoder.cpp%23100%3C%2FA%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%20class%3D%22line%22%3EThus%2C%20users%20must%20choose%20between%20saving%20absurdly%20large%2C%20crisp%20images%20(JPEG%20100%25%20or%20PNG)%20and%20reasonably%20sized%2C%20but%20blurry%20(JPEG%2080-99%25)%20images.%20Even%20disabling%20subsampling%20at%2095%25%20quality%20would%20be%20a%20boon%20to%20our%20users.%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%20class%3D%22line%22%3EI'm%20happy%20to%20provide%20more%20examples%2Fresources%20if%20any%20of%20this%20is%20unclear!%20Thanks%20for%20all%20your%20work%20on%20the%20web%20platform.%20Just%20hoping%20for%20saner%20defaults%20%26amp%3B%20cross%20browser%20consensus%20on%20this.%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%20class%3D%22line%22%3EAs%20a%20side%20note%2C%20we%20have%20explored%20using%20a%20JS%20library%20(on%20the%20main%20thread%20or%20in%20web%20workers)%20or%20WebAssembly%20for%20compressing%20JPEG%20(w%2Fout%20subsampling)%2C%20but%20all%20of%20these%20solutions%20are%20far%20slower%20(2-3x)%20than%20the%20native%20canvas%20toBlob%20and%20toDataURL%20methods%20which%20are%20built%20for%20this%20use%20case.%3C%2FSPAN%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-729360%22%20slang%3D%22en-US%22%3ERe%3A%20JPEG%20exported%20from%20canvas%20at%2099%25%20quality%20is%20blurry%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-729360%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F367795%22%20target%3D%22_blank%22%3E%40micahjon%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EWe%20appreciate%20you%20taking%20the%20time%20to%20go%20into%20great%20detail%20about%20the%20issue%2C%20and%20even%26nbsp%3Bgiving%20repo%20steps.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EI%20will%20try%20and%20make%20sure%20the%20right%20teams%20that%20handle%20these%20issues%20take%20a%20look%20at%20this%3C%2FP%3E%0A%3CP%3Einformation%20as%20soon%20as%20possible.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EThanks%20for%20your%20patience%20and%20feedback%2C%3C%2FP%3E%0A%3CP%3EFrank%3C%2FP%3E%3C%2FLINGO-BODY%3E
micahjon
Occasional Visitor

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.

1 Reply

@micahjon 

 

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,

Frank

Related Conversations
Tabs and Dark Mode
cjc2112 in Discussions on
48 Replies
Extentions Synchronization
Deleted in Discussions on
3 Replies
Stable version of Edge insider browser
HotCakeX in Discussions on
35 Replies
How to Prevent Teams from Auto-Launch
chenrylee in Microsoft Teams on
30 Replies
flashing a white screen while open new tab
Deleted in Discussions on
14 Replies
Security Community Webinars
Valon_Kolica in Security, Privacy & Compliance on
13 Replies