Our app takes canvas content and then display it as thumbnail with max-height of 150px

canvas can be as large as the monitor, for now lets pick 2560x1440

If converting to webp,

is there an equation to get quality number that roughly preserve image quality ? , maybe

targetHeight = 150
originalHeight = 1440

quality = targetHeight / originalHeight 
// 150px / 1440px ~ 0.1 ?

canvas.toBlob((blob) => {

    const currentScreenshot = URL.createObjectURL(blob);

}, "image/webp", quality);

Our app takes canvas content and then display it as thumbnail with max-height of 150px

canvas can be as large as the monitor, for now lets pick 2560x1440

If converting to webp,

is there an equation to get quality number that roughly preserve image quality ? , maybe

targetHeight = 150
originalHeight = 1440

quality = targetHeight / originalHeight 
// 150px / 1440px ~ 0.1 ?

canvas.toBlob((blob) => {

    const currentScreenshot = URL.createObjectURL(blob);

}, "image/webp", quality);

• javascript
• image
• html5-canvas

1 Answer 1

You can only set quality value by defining mime type with image/jpeg or image/webp.

The default values are 0.92 & 0.80 respectively. Other values are ignored.

Please refer to this MDN link for HTMLCanvasElement.toBlob() details.