javascript - Canvas 到 Blob 质量

Question

我们的应用程序获取 Canvas 内容，然后将其显示为最大高度为 150 像素的缩略图

Canvas 可以和显示器一样大，现在我们选择 2560x1440

如果转换为 webp，

是否有一个方程可以得到大致保持图像质量的质量数？ ，也许

targetHeight = 150
originalHeight = 1440

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

canvas.toBlob((blob) => {

    const currentScreenshot = URL.createObjectURL(blob);

}, "image/webp", quality);

Answer 1

您只能通过使用image/jpeg或image/webp定义mime类型来设置质量值。

默认值分别为0.92和0.80。其他值将被忽略。

请引用此MDN link了解 HTMLCanvasElement.toBlob() 详细信息。