0

我试图通过将透明 PNG 分解为彩色和 alpha 图像来减少它们的下载大小。这种方法效果很好，对于我客户的图像，尺寸减小了 50% 以上。

为了重新组合我正在尝试使用 SVG 和画布的图像。

SVG 解决方案使用不透明蒙版，而画布使用 globalCompositeOperation。

问题是，SVG 在缩小时会错误地显示暗边（通过在 CSS 中指定大小或直接在 SVG 上指定）。当以与输入图像相同的尺寸渲染 SVG 时，不会出现这些暗边。画布工作正常。这发生在我测试的所有浏览器（Chrome、IE11、Firefox）中

我认为的问题是 SVG 将独立调整 alpha 图像和彩色图像的大小，然后应用不透明蒙版。但是，这种方法不起作用。在图像处理中，众所周知，要调整透明图像的大小，要么必须将颜色分量与 alpha 相乘，然后使用标准的大小调整算法，要么必须执行加权平均（因为大多数透明像素具有对最终颜色的影响较小）。例如见这个讨论

应用 SVG 滤镜效果时，最初可以调整使用的中间分辨率，但我不知道在使用 SVG 蒙版属性时如何做到这一点（Robert Longson 正确地向我指出滤镜效果不支持这一点不再，因为该filterRes属性已被弃用）

这是 SVG 代码（我们在任何兼容 HTML5 的浏览器中直接从我的网站运行它）

<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='1000' height='454' viewBox='0 0 2560 1162'>
    <defs>
        <mask id='mask'>
            <image color-interpolation='sRGB' image-rendering='optimizeQuality' width='2560px' height='1162px' xlink:href='first-A.png'></image>
        </mask>
    </defs>
    <image color-interpolation='sRGB' image-rendering='optimizeQuality' mask='url(#mask)' width='2560px' height='1162px' xlink:href='first-RGB.png'></image>
</svg>

有谁知道如何调整 SVG 蒙版效果以使这些边缘伪影不出现？

非常感谢，

彼得

4

0 回答 0