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

Share Improve this question Follow edited Sep 11, 2019 at 4:11 Lydon Ch asked Sep 11, 2019 at 4:05 Lydon ChLydon Ch 8,8152020 gold badges8080 silver badges136136 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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.