shadows, highlights, blacks + white levels & exposure
"James Churchman [email protected] [svg-developers]" <[email protected]> Wed, 3 Jun 2015 01:37:00 +0100
| Newsgroups | gmane.text.xml.svg.devel |
|---|---|
| Message-ID | <CAE0yOYmhoe1rcLBfPCor8m-G8_9Hd_aZp=ak+aMJNjgXfm++Nw@mail.gmail.com> |
--001a11c38a9cd388eb05179241c3
Content-Type: text/plain; charset=UTF-8
Hi guys
I am attempting to create the traditional shadows, highlights, blacks &
white level & exposure adjustments using SVG filters
The easiest way i can see seems to be to use feComponentTransfer as follows
:
<feComponentTransfer>
<feFuncR type="table" tableValues="0 0.25 0.5 0.75 1"></feFuncR>
<feFuncG type="table" tableValues="0 0.25 0.5 0.75 1"></feFuncG>
<feFuncB type="table" tableValues="0 0.25 0.5 0.75 1"></feFuncB>
</feComponentTransfer>
Starting with the tableValues of "0 0.25 0.5 0.75 1" that map to the
original component transfer, then for a shadows boos say add 0.1 to the
0.25, for a highlight reduction subtract 0.1 from the 0.75 etc.. to now
give :
"0 0.35 0.5 0.65 1"
This has got me most of the way there but it increases the saturation as
well as boosting or reducing the luminance ( this is to be expected )
I was wondering if there was a better way or if there was an easy to
achieve a blending mode of "lightness" which when combined with the
original image would only alter the luminance or a "color" blending mode
which could use the color from the original source image !
Best regards
James
--001a11c38a9cd388eb05179241c3
Content-Type: text/html; charset=UTF-8
Content-Transfer-Encoding: quoted-printable
<head>
<style type=3D"text/css">
<!--
/* start of attachment style */
.ygrp-photo-title{
clear: both;
font-size: smaller;
height: 15px;
overflow: hidden;
text-align: center;
width: 75px;
}
div.ygrp-photo{
background-position: center;
background-repeat: no-repeat;
background-color: white;
border: 1px solid black;
height: 62px;
width: 62px;
}
div.photo-title=20
a,
div.photo-title a:active,
div.photo-title a:hover,
div.photo-title a:visited {
text-decoration: none;=20
}
div.attach-table div.attach-row {
clear: both;
}
div.attach-table div.attach-row div {
float: left;
/* margin: 2px;*/
}
p {
clear: both;
padding: 15px 0 3px 0;
overflow: hidden;
}
div.ygrp-file {
width: 30px;
valign: middle;
}
div.attach-table div.attach-row div div a {
text-decoration: none;
}
div.attach-table div.attach-row div div span {
font-weight: normal;
}
div.ygrp-file-title {
font-weight: bold;
}
/* end of attachment style */
-->
</style>
</head>
<html>
<head>
<style type=3D"text/css">
<!--
#ygrp-mkp {
border: 1px solid #d8d8d8;
font-family: Arial;
margin: 10px 0;
padding: 0 10px;
}
#ygrp-mkp hr {
border: 1px solid #d8d8d8;
}
#ygrp-mkp #hd {
color: #628c2a;
font-size: 85%;
font-weight: 700;
line-height: 122%;
margin: 10px 0;
}
#ygrp-mkp #ads {
margin-bottom: 10px;
}
#ygrp-mkp .ad {
padding: 0 0;
}
#ygrp-mkp .ad p {
margin: 0;
}
#ygrp-mkp .ad a {
color: #0000ff;
text-decoration: none;
}
-->
</style>
</head>
<body>
<!-- |**|begin egp html banner|**| -->
<br><br>
<!-- |**|end egp html banner|**| -->
Hi guys <br><br><br>I am attempting to create the traditional shadows, high=
lights, blacks & white level & exposure adjustments using SVG filte=
rs<br>The easiest way i can see seems to be to use feComponentTransfer as f=
ollows :<br><br><feComponentTransfer><br> =C2=A0 =C2=A0<feFuncR ty=
pe=3D"table" tableValues=3D"0 0.25 0.5 0.75 1"></=
feFuncR><br> =C2=A0 =C2=A0<feFuncG type=3D"table" tableValu=
es=3D"0 0.25 0.5 0.75 1"></feFuncG><br> =C2=A0 =C2=A0<=
;feFuncB type=3D"table" tableValues=3D"0 0.25 0.5 0.75 1&quo=
t;></feFuncB><br></feComponentTransfer><br><br><br>Starting =
with the tableValues of "0 0.25 0.5 0.75 1" that map to the origi=
nal component transfer, then for a shadows boos say add 0.1 to the 0.25, fo=
r a highlight reduction subtract 0.1 from the 0.75 etc.. to now give :<br>&=
quot;0 0.35 0.5 0.65 1"<br><br>This has got me most of the way there b=
ut it increases the saturation as well as boosting or reducing the luminanc=
e ( this is to be expected )<br><br>I was wondering if there was a better w=
ay or if there was an easy to achieve a blending mode of "lightness&qu=
ot; which when combined with the original image would only alter the lumina=
nce or a "color" blending mode which could use the color from the=
original source image !<br><br>Best regards<br><br>James
<!-- |**|begin egp html banner|**| -->
<br>
<br>
<!-- |**|end egp html banner|**| -->
<div width=3D"1" style=3D"color: white; clear: both;"/>__._,_.___</div>
=20=20=20=20=20=20
=20=20
=20=20=20=20
<div id=3D"fromDMARC" style=3D"clear:both; margin-top: 10px;">
<hr style=3D"height:2px ; border-width:0; color:#E3E3E3; backgroun=
d-color:#E3E3E3;">
Posted by: James Churchman <[email protected]> =
<hr style=3D"height:2px ; border-width:0; color:#E3E3E3; background-color=
:#E3E3E3;">
</div>
<!-- Start Recommendations -->
<!-- End Recommendations -->
<!-- |**|begin egp html banner|**| -->
<br><br>
<tt>
-----<BR>
To unsubscribe send a message to: [email protected]=
m<BR>
-or-<BR>
visit <a href=3D"http://groups.yahoo.com/group/svg-developers">http://group=
s.yahoo.com/group/svg-developers</a> and click "edit my membership&quo=
t;<BR>
----</tt>
<br><br>
<!-- |**|end egp html banner|**| -->
<!-- |**|begin egp html banner|**| -->
<img src=3D"http://geo.yahoo.com/serv?s=3D97476590/grpId=3D1298421/grpspI=
d=3D1706030390/msgId=3D66484/stime=3D1433291822" width=3D"1" height=3D"1"> =
<br>
<!-- |**|end egp html banner|**| -->
=20=20
<!-- |**|begin egp html banner|**| -->
<br>
=20=20=20
=20=20=20=20=20
=20
<!-- |**|begin egp html banner|**| -->
<div id=3D"ygrp-vital" style=3D"background-color: #f2f2f2; font-fam=
ily: Verdana; font-size: 10px; margin-bottom: 10px; padding: 10px;">
<span id=3D"vithd" style=3D"font-weight: bold; color: #333; text-tr=
ansform: uppercase; "><a href=3D"https://groups.yahoo.com/neo/groups/svg-de=
velopers/info;_ylc=3DX3oDMTJlc2FvdTdzBF9TAzk3MzU5NzE0BGdycElkAzEyOTg0MjEEZ3=
Jwc3BJZAMxNzA2MDMwMzkwBHNlYwN2dGwEc2xrA3ZnaHAEc3RpbWUDMTQzMzI5MTgyMg--" sty=
le=3D"text-decoration: none;">Visit Your Group</a></span>
<ul style=3D"list-style-type: none; margin: 0; padding: 0; display: in=
line;">
</ul>
</div>
<div id=3D"ft" style=3D"font-family: Arial; font-size: 11px; margin-top: 5p=
x; padding: 0 2px 0 0; clear: both;">
<a href=3D"https://groups.yahoo.com/neo;_ylc=3DX3oDMTJkaXIxb2s1BF9TAzk3ND=
c2NTkwBGdycElkAzEyOTg0MjEEZ3Jwc3BJZAMxNzA2MDMwMzkwBHNlYwNmdHIEc2xrA2dmcARzd=
GltZQMxNDMzMjkxODIy" style=3D"float: left;"><img src=3D"http://l.yimg.com/r=
u/static/images/yg/img/email/new_logo/logo-groups-137x15.png" height=3D"15"=
width=3D"137" alt=3D"Yahoo! Groups" style=3D"border: 0;"/></a>
<div style=3D"color: #747575; float: right;"> • <a href=3D"https://i=
nfo.yahoo.com/privacy/us/yahoo/groups/details.html" style=3D"text-decoratio=
n: none;">Privacy</a> • <a href=3D"mailto:svg-developers-unsubscribe@y=
ahoogroups.com?subject=3DUnsubscribe" style=3D"text-decoration: none;">Unsu=
bscribe</a> • <a href=3D"https://info.yahoo.com/legal/us/yahoo/utos/te=
rms/" style=3D"text-decoration: none;">Terms of Use</a> </div>
</div>
<!-- |**|end egp html banner|**| -->
</div> <!-- ygrp-msg -->
=20=20=20
<br>
<!-- |**|end egp html banner|**| -->
<div style=3D"color: white; clear: both;"/>__,_._,___</div>
</body>
</html>
--001a11c38a9cd388eb05179241c3--