Effet de filtre SVG Sepia: demi-tons seulement

Question

Pourriez-vous s'il vous plaît m'aider à trouver comment puis-je obtenir le ton sépia sur le lien ci-dessous en utilisant SVG?

My Sepia Tone made with Photoshop's Color Balance

J'ai essayé le code suivant:

<svg class="defs-only"> 
    <filter id="monochrome" color-interpolation-filters="sRGB" 
      x="0" y="0" height="100%" width="100%"> 
    <feColorMatrix type="matrix" 
     values="1.00 0 0 0 0 
       0.80 0 0 0 0 
       0.65 0 0 0 0 
       0 0 0 1 0" /> 
    </filter> 
</svg> 

CSS:

img{ 
    -webkit-filter: url(#monochrome); 
    filter: url(#monochrome); 
} 

Mais le feColorMatrix Sepia Tone que je reçois est très différent et ne semble pas être seulement affecter les tons moyens comme sur Photoshop.

Remarque: Je ne peux pas utiliser de toile.

Answer 1

Eh bien tout d'abord, ce n'est pas un bon filtre sépia. Il n'utilise que le canal rouge comme entrée, donc vous perdez environ un tiers de votre luminosité dès le départ. Le filtre sépia W3C « officiel » est:

<feColorMatrix type="matrix" 
    values="0.39 0.769 0.189 0 0 
      0.349 0.686 0.168 0 0 
      0.272 0.534 0.131 0 0 
      0 0 0 1 0" /> 

Cela vous donne ce résultat:

Et si vous voulez juste pour traiter les demi-tons, alors vous devez tirer le milieu tonifie et traite les séparément. Cela ressemble à ceci:

<filter id="mid-sepia" color-interpolation-filters="sRGB"> 
    <feColorMatrix type="luminanceToAlpha"/> 
    <feComponentTransfer > 
    <feFuncA type="table" tableValues="0 .2 0.5 1 1 1 0.5 .2 0"/> 
    </feComponentTransfer> 
<feComposite operator="in" in="SourceGraphic"/> 
    <feColorMatrix type="matrix" result="sepia-clip" 
    values="0.39 0.769 0.189 0 0 
      0.349 0.686 0.168 0 0 
      0.272 0.534 0.131 0 0 
      0 0 0 1 0" /> 

    <feColorMatrix in="SourceGraphic" type="matrix" result="gscale" 
       values="0.2126 0.7152 0.0722 0 0 
         0.2126 0.7152 0.0722 0 0 
         0.2126 0.7152 0.0722 0 0 
         0 0 0 1 0" /> 
    <feComposite operator="over" in="sepia-clip" in2="gscale"/> 
</filter> 

Et vous donne quelque chose qui ressemble à ceci:

La magie est ici les paramètres pour feFuncA - qui contrôle la largeur de la sélection mi-ton est. "0 .2 0.5 1 1 1 0.5 .2 0" est une sélection assez large - donc si vous voulez une gamme plus étroite étant donné le traitement sépia, vous pouvez utiliser quelque chose comme "0 0 0 0.2 0.5 1 0.5 0.2 0 0 0 "- jouez avec jusqu'à ce que vous ayez quelque chose que vous aimez.

http://codepen.io/mullany/pen/rjdYre?editors=1000#

Answer 2

Je ne sais pas si vous voyez cela, mais un générateur de feColorMatrix existe: https://codepen.io/mullany/pen/qJCDk

il vous suffit de changer l'image par votre:

<image x="0" y="0" width="590" height="400" filter="url(#f1)" xlink:href="[YOUR IMAGE]"/> 

Vous pouvez jouer avec tous les paramètres comme dans Photoshop. Appréciez (ノ ≧ ∀ ≦) ノ