透過 PNG をカラー イメージとアルファ イメージに分解することで、そのダウンロード サイズを小さくしようとしています。このアプローチは問題なく機能します。私の顧客の画像では、サイズが 50% 以上縮小されています。
画像を再構成するために、SVG とキャンバスの両方を試しています。
SVG ソリューションは不透明マスクを使用し、キャンバスは globalCompositeOperation を使用します。
問題は、(CSS でサイズを指定するか、SVG で直接指定することによって) 縮小すると、SVG が誤って暗いエッジを表示することです。これらの暗いエッジは、入力画像と同じサイズで SVG をレンダリングする場合には表示されません。キャンバスは正常に動作します。これは、私がテストしたすべてのブラウザー (Chrome、IE11、Firefox) で発生します。
私が信じている問題は、SVG がアルファ イメージとカラー イメージのサイズを個別に変更してから、不透明マスクを適用することです。ただし、このアプローチは機能しません。画像処理では、透明な画像のサイズを変更するには、色成分にアルファを事前に乗算してから標準のサイズ変更アルゴリズムを使用するか、加重平均を実行する必要があることはよく知られています (ほとんどの透明なピクセルは最終的な色への影響が少ない)。たとえば、このディスカッションを参照してください
SVG フィルター効果を適用する場合、最初に使用される中間解像度を微調整できますが、SVG マスク プロパティを使用する場合にこれを行う方法がわかりません (Robert Longson は、フィルター効果がこれをサポートしていないことを正しく指摘しました)。属性が廃止されたため、filterResもう）
SVGコードは次のとおりです（HTML5準拠のブラウザーで私のWebサイトから直接実行します）
<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 マスク効果を微調整する方法を知っている人はいますか?
どうもありがとう、
ピーター