firefox - 如何提高 Firefox 中 CanvasRenderingContext2D 的平滑度？

我想在 Canvas 中显示缩小的图像。这样做时，飞船底部会出现锯齿状边缘，看起来抗锯齿功能被禁用了。

这是在 Firefox 中生成的图像的缩放:

图像非常清晰，但我们看到锯齿状边缘(特别是飞船底部、挡风玻璃、机头翼)。

在 Chrome 中:

图像保持清晰(舷窗保持清晰，所有线条)并且没有锯齿状边缘。只有云彩变得模糊了一些。

在禁用平滑功能的 Chrome 中:

我尝试设置属性 imageSmoothingEnabled为 true，但在 Firefox 中没有效果，我的例子:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
<body>
    <!-- <canvas id="canvas1" width="1280" height="720" style="width: 640px; height: 360px;"></canvas> -->
    <canvas id="canvas1" width="640" height="360" style="width: 640px; height: 360px;"></canvas>
    <script>
        const canvas = document.getElementById("canvas1")
        const ctx = canvas.getContext("2d")

        console.log("canvas size", canvas.width, canvas.height);

        const img = new Image()

        img.onload = () => {
            const smooth = true;
            ctx.mozImageSmoothingEnabled = smooth;
            ctx.webkitImageSmoothingEnabled = smooth;
            ctx.msImageSmoothingEnabled = smooth;
            ctx.imageSmoothingEnabled = smooth;
            // ctx.filter = 'blur(1px)';
            ctx.drawImage(img, 0, 0, 3840, 2160, 0, 0, canvas.width, canvas.height);
        }

        img.src = "https://upload.wikimedia.org/wikipedia/commons/f/f8/BFR_at_stage_separation_2-2018.jpg";
    </script>
</body>
</html>

如何应用抗锯齿功能？

编辑:在 Chrome 中查看网站时会应用抗锯齿处理，但在 Firefox 中则不会。

编辑 2:更精确地比较图像。实际上，Firefox 似乎应用了一些图像增强功能，但在将 imageSmoothingEnabled 设置为 false 时并没有禁用它

编辑 3:将提到的抗锯齿替换为平滑，因为似乎不仅仅涉及 AA。

到目前为止的解决方法(我渴望听到您的建议!):

用更多像素渲染 Canvas ，然后通过 CSS 缩小它 -> 手动移动质量/性能光标
使用离线工具调整图像大小 -> 非交互式
对图像应用 1 像素模糊 -> 不再有锯齿状边缘，但图像明显模糊

使用模糊技术的屏幕截图:

最佳答案

高品质羽绒 sample 。

这个答案提出了一个下采样器，它将在不同浏览器中获得一致的结果，并允许均匀和非均匀的大范围的减少。

优点

它在质量方面具有显着的优势，因为它可以使用 64 位浮点 JS 数字，而不是 GPU 使用的 32 位 float 。它还会减少 sRGB，而不是 2d API 使用的较低质量的 RGB。

缺点

它的缺点当然是性能。这在对大图像进行下采样时可能会变得不切实际。但是它可以通过 Web Worker 并行运行，因此不会阻塞主 UI。

仅适用于 50% 或以下的下采样。只需要一些小的修改就可以扩展到任何大小，但该示例选择了速度而不是多功能性。

对于 99% 查看结果的人来说，质量提升几乎不会被注意到。

区域样本

该方法对新目标像素下的源像素进行采样，根据重叠像素区域计算颜色。

下图将有助于理解其工作原理。

左侧显示较小的高分辨率源像素(蓝色)，与新的低分辨率目标像素(红色)重叠。
右侧文盲了源像素的哪些部分对目标像素颜色有贡献。 % 值是目标像素与每个源像素重叠的百分比。

流程概述。

首先我们创建 3 个值来将新的 R、G、B 颜色保持为零(黑色)

我们对目标像素下的每个像素执行以下操作。

计算目标像素和源像素之间的重叠区域。
将源像素重叠除以目标像素区域，以获得源像素对目标像素颜色的贡献分数
将源像素 RGB 转换为 sRGB，进行归一化并乘以上一步计算的分数贡献，然后将结果添加到存储的 R、G、B 值中。

处理完新像素下的所有像素后，新颜色 R、G、B 值将转换回 RGB 并添加到图像数据中。

完成后，像素数据将添加到 Canvas 中，返回后可供使用

示例

该示例将图像缩小约 1/4

完成后，该示例将显示缩放后的图像以及通过 2D API 缩放的图像。

您可以单击顶部图像在两种方法之间交换并比较结果。

/* Image source By SharonPapierdreams - Own work, CC BY-SA 4.0, https://commons.wikimedia.org/w/index.php?curid=97564904 */


// reduceImage(img, w, h) 
// img is image to down sample. w, h is down sampled image size.
// returns down sampled image as a canvas. 
function reduceImage(img, w, h) {
    var x, y = 0, sx, sy, ssx, ssy, r, g, b, a;
    const RGB2sRGB = 2.2;  // this is an approximation of sRGB
    const sRGB2RGB = 1 / RGB2sRGB;
    const sRGBMax = 255 ** RGB2sRGB;

    const srcW = img.naturalWidth;
    const srcH = img.naturalHeight;
    const srcCan = Object.assign(document.createElement("canvas"), {width: srcW, height: srcH});
    const sCtx = srcCan.getContext("2d");
    const destCan = Object.assign(document.createElement("canvas"), {width: w, height: h});
    const dCtx = destCan.getContext("2d");
    sCtx.drawImage(img, 0 , 0);
    const srcData = sCtx.getImageData(0,0,srcW,srcH).data;
    const destData = dCtx.getImageData(0,0,w,h);

    // Warning if yStep or xStep span less than 2 pixels then there may be
    // banding artifacts in the image
    const xStep = srcW / w, yStep = srcH / h;
    if (xStep < 2 || yStep < 2) {console.warn("Downsample too low. Should be at least 50%");}
    const area = xStep * yStep
    const sD = srcData, dD = destData.data;

    
    while (y < h) {
        sy = y * yStep;
        x = 0;
        while (x < w) {
            sx = x * xStep;
            const ssyB = sy + yStep;
            const ssxR = sx + xStep;
            r = g = b = a = 0;
            ssy = sy | 0;
            while (ssy < ssyB) {
                const yy1 = ssy + 1;
                const yArea = yy1 > ssyB ? ssyB - ssy : ssy < sy ? 1 - (sy - ssy) : 1;
                ssx = sx | 0;
                while (ssx < ssxR) {
                    const xx1 = ssx + 1;
                    const xArea = xx1 > ssxR ? ssxR - ssx : ssx < sx ? 1 - (sx - ssx) : 1;
                    const srcContribution = (yArea * xArea) / area;
                    const idx = (ssy * srcW + ssx) * 4;
                    r += ((sD[idx  ] ** RGB2sRGB) / sRGBMax) * srcContribution;
                    g += ((sD[idx+1] ** RGB2sRGB) / sRGBMax) * srcContribution;
                    b += ((sD[idx+2] ** RGB2sRGB) / sRGBMax) * srcContribution;
                    a +=  (sD[idx+3] / 255) * srcContribution;
                    ssx += 1;
                }
                ssy += 1;
            }
            const idx = (y * w + x) * 4;
            dD[idx]   = (r * sRGBMax) ** sRGB2RGB;
            dD[idx+1] = (g * sRGBMax) ** sRGB2RGB;
            dD[idx+2] = (b * sRGBMax) ** sRGB2RGB;
            dD[idx+3] = a * 255;
            x += 1;
        }
        y += 1;
    }

    dCtx.putImageData(destData,0,0);
    return destCan;
}









const scaleBy = 1/3.964; 
const img = new Image;
img.crossOrigin = "Anonymous";
img.src = "https://upload.wikimedia.org/wikipedia/commons/7/71/800_Houston_St_Manhattan_KS_3.jpg";
img.addEventListener("load", () => {
    const downScaled = reduceImage(img, img.naturalWidth * scaleBy | 0, img.naturalHeight * scaleBy | 0);
    const downScaleByAPI = Object.assign(document.createElement("canvas"), {width: downScaled.width, height: downScaled.height});
    const ctx = downScaleByAPI.getContext("2d");
    ctx.drawImage(img, 0, 0, ctx.canvas.width, ctx.canvas.height);
    const downScaleByAPI_B = Object.assign(document.createElement("canvas"), {width: downScaled.width, height: downScaled.height});
    const ctx1 = downScaleByAPI_B.getContext("2d");
    ctx1.drawImage(img, 0, 0, ctx.canvas.width, ctx.canvas.height);    
    img1.appendChild(downScaled);
    img2.appendChild(downScaleByAPI_B);
    info2.textContent = "Original image " + img.naturalWidth + " by " + img.naturalHeight + "px Downsampled to " + ctx.canvas.width + " by " + ctx.canvas.height+ "px"
    var a = 0;
    img1.addEventListener("click", () => {
        if (a) {
            info.textContent = "High quality JS downsampler";
            img1.removeChild(downScaleByAPI);
            img1.appendChild(downScaled);   
        } else {            
            info.textContent = "Standard 2D API downsampler"; 
            img1.removeChild(downScaled);
            img1.appendChild(downScaleByAPI);            
        }
        a = (a + 1) % 2;
    })
}, {once: true})

body { font-family: arial }

<br>Click first image to switch between JS rendered and 2D API rendered versions<br><br>
<span id="info2"></span><br><br>
<div id="img1"> <span id="info">High quality JS downsampler </span><br></div>
<div id="img2"> Down sampled using 2D API<br></div>

Image source <cite><a href="https://commons.wikimedia.org/w/index.php?curid=97564904">By SharonPapierdreams - Own work, CC BY-SA 4.0,</a></cite>

有关 RGB V sRGB 的更多信息

sRGB 是所有数字媒体设备用来显示内容的色彩空间。人类看到的亮度对数意味着显示设备的动态范围为 1 到 ~200,000，这需要每 channel 18 位。

显示缓冲区通过将 channel 值存储为 sRGB 来克服这个问题。亮度范围为 0 - 255。当显示硬件将此值转换为光子时，它首先通过将其提高到 2.2 次方来扩展 255 个值，以提供所需的高动态范围。

问题是处理显示缓冲区(2D API)会忽略这一点并且不会扩展 sRGB 值。它被视为 RGB，导致颜色混合不正确。

该图像显示了 sRGB 和 RGB(2D API 使用的 RGB)渲染之间的差异。

注意中间和右侧图像上的暗像素。这就是RGB渲染的结果。左图使用 sRGB 渲染，不会损失亮度。

关于firefox - 如何提高 Firefox 中 CanvasRenderingContext2D 的平滑度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65406887/