Recommended Free Tools
iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Not always. HTMLCanvasElement.toBlob() takes a numeric quality value for lossy formats such as JPEG and WebP. JavaScript can convert a numeric string such as "0.8" to the number 0.8; a nonnumeric string cannot specify a usable quality. If the value is omitted or out of range, the browser uses its encoder’s default. PNG does not use this quality setting.
A check can appear to show no effect if it uses PNG, requests a format the browser does not support, or compares file sizes without confirming the callback result. Because no test code, browser version, or output is available here, the cause of the original check cannot be identified. The steps below help isolate it.
What the quality argument does
The method signature is canvas.toBlob(callback, type, quality). The second argument requests an output format, and the third supplies a quality value for formats that use lossy compression. The browser calls the callback with the resulting Blob; toBlob() does not synchronously return that Blob. See the MDN API reference and the WHATWG Canvas standard.
The parameter is numeric, but a numeric string is not necessarily ignored: Web IDL converts arguments to their declared types, so a string containing a number can be converted. A string such as "not-a-number" cannot yield a usable quality value. When quality is omitted or outside the accepted range, the browser uses a user-agent default; there is no single default guaranteed across browsers.
#1 Best Overall
Quality affects lossy encodings such as image/jpeg and image/webp. It does not provide a PNG quality control. Passing a quality argument while requesting PNG is therefore not a useful test of whether the value was honored.
Why a first check can give the wrong impression
- The test used PNG. PNG is lossless, so changing the quality argument does not test lossy quality behavior.
- The requested format was not supported. If the browser cannot encode the requested type, it falls back to PNG. Check the returned Blob’s
typerather than assuming the request succeeded. - The callback result was not inspected. The Blob is delivered asynchronously through the callback; code that treats
toBlob()as a synchronous return value is checking the wrong result. - The comparison relied only on byte size. Output size depends on image content and the browser’s encoder. A size difference—or the absence of one—does not by itself establish whether the quality argument was used.
- The argument forms were conflated. A numeric string such as
"0.2"and a nonnumeric string are different cases; testing only one cannot establish how both behave.
How to check the argument properly
- Choose an image with visible fine detail. Use the same canvas content for each export so the input does not change between comparisons.
- Request a lossy format explicitly. For example, use
"image/jpeg"or"image/webp", rather than PNG. - Compare argument forms against a numeric control. Try a numeric value such as
0.2, the numeric string"0.2", and a nonnumeric string in separate exports. For example:canvas.toBlob(cb, "image/jpeg", 0.2)andcanvas.toBlob(cb, "image/jpeg", "0.2"). This is a diagnostic procedure, not a reported test result. - Wait for each callback and inspect the Blob. Record
blob.typeto confirm the actual output format before comparing anything else. - Record the browser and version. If results differ, include them along with the requested format, argument value, and returned type. Browser behavior and compatibility information are versioned.
File size can be recorded as one observation, but it is not proof on its own that a particular quality value was applied. The API documentation does not guarantee a particular byte-size change for a given image or pair of values.
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Browser compatibility
MDN describes toBlob() as widely available and links compatibility details for the API. Its compatibility-data snapshot also tracks the quality parameter across major browser families. Consult the MDN Browser Compatibility Data snapshot when investigating a specific browser, and report the browser version rather than generalizing from one installation.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorsQuick Recap
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Rank #3
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
