Many websites are using blurred images in background. If you want to highlight part of the image, what will you do ? Maybe drawing some shape on the image with red marker. We can do this with SVG filter and mask components. UnBlurring the part of completely blurred image will give better and clean attention.
Please have look at below code.
Please have look at below code.
<svg class="blur" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="750" height="498"> <!-- Image that was blurred and half brightend --> <image filter="url(#filter2)" xlink:href="https://lh3.googleusercontent.com/-zJ3ijSNpElc/VyGE80Uo5PI/AAAAAAAADk4/w2cGycz0gIoGz5HDci02WU70uXqJnhYAgCCo/s912/inNature.JPG" width="100%" height="100%"></image> <!-- filter to control blur and brightness --> <filter id="filter2"> <!-- standard deviation to control blur --> <feGaussianBlur stdDeviation="7"></feGaussianBlur> <!-- standard deviation to control brightness --> <feComponentTransfer> <feFuncR type="linear" slope="0.5"></feFuncR> <feFuncG type="linear" slope="0.5"></feFuncG> <feFuncB type="linear" slope="0.5"></feFuncB> </feComponentTransfer> </filter> <!-- mask to unblur the part of the image --> <mask id="mask1"> <circle cx="177" cy="166" r="150" fill="white" style="opacity: 1;"></circle> </mask> <!-- image to show unblurred image part --> <image xlink:href="https://lh3.googleusercontent.com/-zJ3ijSNpElc/VyGE80Uo5PI/AAAAAAAADk4/w2cGycz0gIoGz5HDci02WU70uXqJnhYAgCCo/s912/inNature.JPG" width="100%" height="100%" mask="url(#mask1)"></image> </svg>
i think its easier to use filters, if you are a newbie, personally i use https://macphun.com/focus for my shots!its great after macro shooting!
ReplyDeleteGreat Article Image Processing Projects Deep Learning Projects for Final Year JavaScript Training in Chennai JavaScript Training in Chennai The Angular Training covers a wide range of topics including Components, Angular Directives, Angular Services, Pipes, security fundamentals, Routing, and Angular programmability. The new Angular TRaining will lay the foundation you need to specialise in Single Page Application developer. Angular Training Project Centers in Chennai
DeleteThank you for sharing this. I think it is very important for kids to know how to make photos better. Try to use filters https://photolemur.com to make your photos better.
ReplyDeleteHi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from Javascript Training in Chennai . or learn thru JavaScript Online Training India. Nowadays JavaScript has tons of job opportunities on various vertical industry.
ReplyDeleteThe website is looking bit flashy and it catches the visitors eyes. Design is pretty simple and a good user friendly interface. image masking service
ReplyDeleteTake greetings from fotomasking.com. Good to see your post. Mainly the key fact of this service is cost effective. Saving a lot of money for the companies actually who needs a bulk image editing every months. Thanks to share this.Clipping path service
ReplyDeleteVery useful post. This is my first time i visit here. I found so many interesting stuff in your blog. Cuponism My
ReplyDelete