Instant Effect 1 1 1 – Filter Your Images
Adding those two images is done by taking the edge detection filter from the previous example, and incrementing the center value of it with 1. Now the sum of the filter elements is 1 and the result will be an image with the same brightness as the original, but sharper. A high-pass filter can be used to make an image appear sharper. These filters emphasize fine details in the image – exactly the opposite of the low-pass filter. High-pass filtering works in exactly the same way as low-pass filtering; it just uses a different convolution kernel. In the example below, notice the minus signs for the adjacent pixels. OurCam includes a variety of beauty effects and photo filters to beautify your photos! 📷 key features: 【 automatic beautification 】 remove acne and spots, make the skin smooth and shiny real-time effect v-shaped face, whiten teeth, enlarge eyes, etc photo filter mirror real-time filter and stylish photo effect.
HOW TO
HowTo HomeMenus
Icon BarMenu IconAccordionTabsVertical TabsTab HeadersFull Page TabsHover TabsTop NavigationResponsive TopnavNavbar with IconsSearch MenuSearch BarFixed SidebarSide NavigationResponsive SidebarFullscreen NavigationOff-Canvas MenuHover Sidenav ButtonsSidebar with IconsHorizontal Scroll MenuVertical MenuBottom NavigationResponsive Bottom NavBottom Border Nav LinksRight Aligned Menu LinksCentered Menu LinkEqual Width Menu LinksFixed MenuSlide Down Bar on ScrollHide Navbar on ScrollShrink Navbar on ScrollSticky NavbarNavbar on ImageHover DropdownsClick DropdownsCascading DropdownDropdown in TopnavDropdown in SidenavResp Navbar DropdownSubnavigation MenuDropupMega MenuMobile MenuCurtain MenuCollapsed SidebarCollapsed SidepanelPaginationBreadcrumbsButton GroupVertical Button GroupSticky Social BarPill NavigationResponsive HeaderImages
SlideshowSlideshow GalleryModal ImagesLightboxResponsive Image GridImage GridTab GalleryImage Overlay FadeImage Overlay SlideImage Overlay ZoomImage Overlay TitleImage Overlay IconImage EffectsBlack and White ImageImage TextImage Text BlocksTransparent Image TextFull Page ImageForm on ImageHero ImageBlur Background ImageChange Bg on ScrollSide-by-Side ImagesRounded ImagesAvatar ImagesResponsive ImagesCenter ImagesThumbnailsBorder Around ImageMeet the TeamSticky ImageFlip an ImageShake an ImagePortfolio GalleryPortfolio with FilteringImage ZoomImage Magnifier GlassImage Comparison SliderButtons
Alert ButtonsOutline ButtonsSplit ButtonsAnimated ButtonsFading ButtonsButton on ImageSocial Media ButtonsRead More Read LessLoading ButtonsDownload ButtonsPill ButtonsNotification ButtonIcon ButtonsNext/prev ButtonsMore Button in NavBlock ButtonsText ButtonsRound ButtonsScroll To Top ButtonForms
Login FormSignup FormCheckout FormContact FormSocial Login FormRegister FormForm with IconsNewsletterStacked FormResponsive FormPopup FormInline FormClear Input FieldHide Number ArrowsCopy Text to ClipboardAnimated SearchSearch ButtonFullscreen SearchInput Field in NavbarLogin Form in NavbarCustom Checkbox/RadioCustom SelectToggle SwitchCheck CheckboxDetect Caps LockTrigger Button on EnterPassword ValidationToggle Password VisibilityMultiple Step FormAutocompleteTurn off autocompleteTurn off spellcheckFile Upload ButtonEmpty Input ValidationFilters
Filter ListFilter TableFilter ElementsFilter DropdownSort ListSort TableTables
Zebra Striped TableCenter TablesResponsive TablesComparison TableMore
Fullscreen VideoModal BoxesDelete ModalTimelineScroll IndicatorProgress BarsSkill BarRange SlidersTooltipsDisplay Element HoverPopupsCollapsibleCalendarHTML IncludesTo Do ListLoadersStar RatingUser RatingOverlay EffectContact ChipsCardsFlip CardProfile CardProduct CardAlertsCalloutNotesLabelsCirclesStyle HRCouponList GroupList Without BulletsResponsive TextCutout TextGlowing TextFixed FooterSticky ElementEqual HeightClearfixResponsive FloatsSnackbarFullscreen WindowScroll DrawingSmooth ScrollGradient Bg ScrollSticky HeaderShrink Header on ScrollPricing TableParallaxAspect RatioResponsive IframesToggle Like/DislikeToggle Hide/ShowToggle Dark ModeToggle TextToggle ClassAdd ClassRemove ClassActive ClassTree ViewRemove PropertyOffline DetectionFind Hidden ElementRedirect WebpageZoom HoverFlip BoxCenter VerticallyCenter Button in DIVTransition on HoverArrowsShapesDownload LinkFull Height ElementBrowser WindowCustom ScrollbarHide ScrollbarShow/Force ScrollbarDevice LookContenteditable BorderPlaceholder ColorText Selection ColorBullet ColorVertical LineDividersAnimate IconsCountdown TimerTypewriterComing Soon PageChat MessagesPopup Chat WindowSplit ScreenTestimonialsSection CounterQuotes SlideshowClosable List ItemsTypical Device BreakpointsDraggable HTML ElementJS Media QueriesSyntax HighlighterJS AnimationsJS String LengthJS Default ParametersGet Current URLGet Current Screen SizeGet Iframe ElementsWebsite
Make a WebsiteMake a Website (W3.CSS)Make a Website (BS3)Make a Website (BS4)Make a WebBookCenter WebsiteContact SectionAbout PageBig HeaderExample WebsiteGrid
2 Column Layout3 Column Layout4 Column LayoutExpanding GridList Grid ViewMixed Column LayoutColumn CardsZig Zag LayoutBlog LayoutConverters
Convert WeightConvert TemperatureConvert LengthConvert SpeedTable of Contents
Back to indexIntroduction
Image filtering allows you to apply various effects on photos. Thetype of image filtering described here uses a 2D filter similar tothe one included in Paint Shop Pro as User Defined Filter and inPhotoshop as Custom Filter.Convolution
The trick of image filtering is that you have a 2D filter matrix,and the 2D image. Then, for every pixel of the image, take the sumof products. Each product is the color value of the current pixelor a neighbor of it, with the corresponding value of the filtermatrix. The center of the filter matrix has to be multiplied withthe current pixel, the other elements of the filter matrix withcorresponding neighbor pixels.This operation where you take the sum of products of elements fromtwo 2D functions, where you let one of the two functions move overevery element of the other function, is called Convolution orCorrelation. The difference between Convolution and Correlation isthat for Convolution you have to mirror the filter matrix, butusually it's symmetrical anyway so there's no difference.
The filters with convolution are relatively simple. More complexfilters, that can use more fancy functions, exist as well, and cando much more complex things (for example the Colored Pencil filterin Photoshop), but such filters aren't discussed here.
The 2D convolution operation requires a 4-double loop, so it isn'textremely fast, unless you use small filters. Here we'll usually beusing 3x3 or 5x5 filters.
There are a few rules about the filter:
- Its size has to be uneven, so that it has a center, forexample 3x3, 5x5 and 7x7 are ok.
- It doesn't have to, but the sum of all elements of the filtershould be 1 if you want the resulting image to have the samebrightness as the original.
- If the sum of the elements is larger than 1, the result will bea brighter image, and if it's smaller than 1, a darker image. Ifthe sum is 0, the resulting image isn't necessarily completelyblack, but it'll be very dark.
The resulting pixel values after applying the filter can benegative or larger than 255, if that happens you can truncate themso that values smaller than 0 are made 0 and values larger than 255are set to 255. For negative values, you can also take the absolutevalue instead.
In the Fourier Domain or Frequency Domain, the convolutionoperation becomes a multiplication instead, which is faster. In theFourier Domain, much more powerful and bigger filters can beapplied faster, especially if you use the Fast Fourier Transform.More about this is in the Fourier Transform article. In thisarticle, we'll look at a few very typical small filters, such asblur, edge detection and emboss.
Image filters aren't feasible for real time applications and gamesyet, but they're useful in image processing.
Digital audio and electronic filters work with convolution as well,but in 1D.
Here's the code that'll be used to try out different filters. Apartfrom using a filter matrix, it also has a multiplier factor and abias. After applying the filter, the factor will be multiplied withthe result, and the bias added to it. So if you have a filter withan element 0.25 in it, but the factor is set to 2, all elements ofthe filter are in theory multiplied by two so that element 0.25 isactually 0.5. The bias can be used if you want to make theresulting image brighter.
The result of one pixel is stored in floats red, green and blue,before converting it to the integer value in the result buffer.
1.1.1.1 For Pc
The filter calculation itself is a 4-double loop that has to gothrough every pixel of the image, and then through every element ofthe filter matrix. The location imageX and imageY is calculated sothat for the center element of the filter it'll be x, y, but forthe other elements it'll be a pixel from the image to the left,right, top or bottom of x, y. Its modulo divided through the width(w) or height (h) of the image so that pixels outside the imagewill be wrapped around. Before modulo dividing it, w or h are alsoadded to it, because this modulo division doesn't work correctlyfor negative values. Now, pixel (-1, -1) will correctly becomepixel (w-1, h-1).
If you want to take the absolute value of values smaller than zeroinstead of truncating it, use this code instead:
The filter filled in currently,
[ 0 0 0 ]
[ 0 1 0 ]
[ 0 0 0 ],
does nothing more than returning the original image, since only thecenter value is 1 so every pixel is multiplied with 1.
The code tries to load the image 'pics/photo3.bmp'. This image canbe downloaded here.
The original image looks like this:
Instant Effect 1 1 1 – Filter Your Images Transparent
Now we'll apply several filters to the image by changing thedefinition of the filter array and running the code.
Blur
Blurring is done for example by taking the average of the currentpixel and its 4 neighbors. Take the sum of the current pixel andits 4 neighbors, and divide it through 5, or thus fill in 5 timesthe value 0.2 in the filter:With such a small filter matrix, this gives only a very softblur:
With a bigger filter you can blur it a bit more (don't forget tochange the filterWidth and filterHeight values):
The sum of all elements of the filter should be 1, but instead offilling in some floating point value inside the filter, instead thefactor is divided through the sum of all elements, which is13.
This blurs it a bit more already:
The more blur you want, the bigger the filter has to be, or you canapply the same small blur filter multiple times.
If your kernel is an entire box filled with the same value (with appropriate scaling factorso all elements sum to 1.0), then the blur is called a box blur. If you want a very largebox blur, then the naive convolution code in this tutorial is too slow. But you can implementit easily with a much faster algorithm: Since every value has the same factor, you can goloop through the pixels of the image line by line, and sum N values (with N the width of thebox) and divide through the appropriate scaling factor. Then for every next pixel, you add thevalue of the next pixel that appears in the box, and subtract the value from the leftmost pixelthat disappears from the box. After doing this for each scanline horizontally, do the samevertically (to optimize use of the CPU cache, when doing it vertically, ensure that you stillimplement it in such way that you still operate in scanline order in practice rather than percolumns, so store a sum per column). This all requires care with how you treat the edges (wherethe box is partially out of bounds) and the case where the image is smaller than the box. Nocode is given here as it goes a bit beyond the scope of this tutorial.
Gaussian Blur
In the blurring above, the kernel we used is rather harsh. A much smoother bluris achieved with a gaussian kernel. With a gaussian kernel, the value exponentiallydecreases as we go away from the center. The formula is: G(x) = exp(-x * x / 2 * sigma * sigma) / sqrt(2 * pi * sigma * sigma)For 2D, you apply this formula in the X direction, then in the Y direction (it is separable), or combined it gives:G(x, y) = exp(-(x * x + y * y) / (2 * sigma * sigma)) / (2 * pi * sigma * sigma)
In the formulas:
*) sigma determines the radius (in theory the radius is in finite, but in practice due to the exponential backoffthere is a point where it becomes too small to see, the larger sigma is the further away this is)*) x and y must be coordinates such that 0 is in the center of the kernel
The above formula tells hwo to make arbitrarily large kernels. However, here are simple examples that can beused immediately:
Approximation to 3x3 kernel:
#define filterWidth 3#define filterHeight 3double filter[filterHeight][filterWidth] ={ 1, 2, 1, 2, 4, 2, 1, 2, 1,};double factor = 1.0 / 16.0;double bias = 0.0;
Approximation to 5x5 kernel:
#define filterWidth 5#define filterHeight 5double filter[filterHeight][filterWidth] ={ 1, 4, 6, 4, 1, 4, 16, 24, 16, 4, 6, 24, 36, 24, 6, 4, 16, 24, 16, 4, 1, 4, 6, 4, 1,};double factor = 1.0 / 256.0;double bias = 0.0;
An exact intead of approximate example:
#define filterWidth 3#define filterHeight 3double filter[filterHeight][filterWidth] ={ 0.077847, 0.123317, 0.077847, 0.123317, 0.195346, 0.123317, 0.077847, 0.123317, 0.077847,};double factor = 1.0;double bias = 0.0;
For larger radius (such as you can try in a painting program that has gaussianblur), you need larger kernels. The naive convolution implementationlike used in this tutorial would become too slow in practice for large radiusgaussian blurs. But there are solutions to that: using the Fourier Transform asdescribed in the Fourier Transform tutorial of this series, or an even faster approximation:The fast approximation involves doing multiple box blurs in a row, three in a rowapproximated it already very well. How to do a fast box blur is explained in theprevious chapter. The reason this works is that a gaussian distribution arisesnaturally from a sum of other processes.
Motion Blur
Motion blur is achieved by blurring in only 1 direction. Here's a9x9 motion blur filter:It's as if the camera is moving from the top left to the bottomright, hence the name.
FindEdges
A filter to find the horizontal edges can look like this:A filter of 5x5 instead of 3x3 was chosen, because the result of a3x3 filter is too dark on the current image. Note that the sum ofall the elements is 0 now, which will result in a very dark imagewhere only the edges it detected are colored.
The reason why this filter can find horizontal edges, is that theconvolution operation with this filter can be seen as a sort ofdiscrete version of the derivative: you take the current pixel andsubtract the value of the previous one from it, so you get a valuethat represents the difference between those two or the slope ofthe function.
Here's a filter that'll find vertical edges instead, and uses bothpixel values below and above the current pixel:
Here's yet another possible filter, one that's good at findingedges of 45°. The values '-2' were chosen for no particularreason at all, just make sure the sum of the values is 0.
And here's a simple edge detection filter that detects edges in alldirections:
Sharpen
To sharpen the image is very similar to finding edges, add theoriginal image, and the image after the edge detection to eachother, and the result will be a new image where the edges areenhanced, making it look sharper. Adding those two images is doneby taking the edge detection filter from the previous example, andincrementing the center value of it with 1. Now the sum of thefilter elements is 1 and the result will be an image with the samebrightness as the original, but sharper.Here's a more subtle sharpen filter:
Here's a filter that shows the edges excessively:
Emboss
An emboss filter gives a 3D shadow effect to the image, the resultis very useful for a bumpmap of the image. It can be achieved bytaking a pixel on one side of the center, and subtracting one ofthe other side from it. Pixels can get either a positive or anegative result. To use the negative pixels as shadow and positiveones as light, for a bumpmap, a bias of 128 is added to the image.Now, most parts of the image will be gray, and the sides will beeither dark gray/black or bright gray/white.For example here's an emboss filter with an angle of 45°:
If you really want to use it as bumpmap, grayscale it:
Here's a much more exaggerated emboss filter:
Mean and Median Filter
Both the Mean Filter and the Median Filter can be used to remove noise from an image.A Mean Filter is a filter that takes the average of the current pixel and its neighbors,for example if you use its 8 neighbors it becomes the filter with kernel:This is an ordinary blur filter. We can test it on the following image with so called 'Salt and Pepper' Noise:
When applied, it gives a blurry result:
The Median Filter does somewhat the same, but, instead of taking the mean or average, it takes the median.The median is gotten by sorting all the values from low to high, and then taking the value in the center. If thereare two values in the center, the average of these two is taken. A median filter gives better results to remove salt and pepper noise,because it completely eliminates the the noise. With an average filter, the color value of the noise particles are still usedin the average calculations, when taking the median you only keep the color value of one or two healthy pixels. The median filteralso reduces the image quality however.
Such a median filter can't be done with a convolution,and a sorting algorithm is needed, in this case combsort was chosen, which is a relatively fast sorting algorithm.
To get the median of the current pixel and its 8 neighbors, set filterWidth and filterHeight to 3, but you can also make it higherto remove larger noise particles.
The arrays red, green and blue will contain the values of the current pixel and all of its neighbors,and these are the arrays that'll be sorted by the sorting algorithm to be able to take the median value.The main function applies the filter, calculates the medians and then draws the result.
The array contains the value of every color in the rectangular area you're working on, but it's not sorted so you can't immediatly take the median of it.Sorting it and taking the center element is one way, but it's in theory faster to use a selection algorithm to select the k-th largest element, with k = size / 2.This is implemented below with a very simple selection algorithm. It's possible to use the standard C++ function nth_element instead, which would be simpler and faster, but we're implementingall algorithms ourselves in this tutorial. Note that, unlike the statistical definition of median this will not takethe average of two elements in case of even array but just take one of them.
Here's again the noisy image:
The 3x3 median filter removes its noise:
Higher sizes of filters go pretty slow, because the code is very unoptimized. More specialized, much faster algorithms for 2D median filter exists but that's beyond the scope of this tutorial.The results of higher sizes are somewhat artistic, so here is the result of different sizes:
5x5:
9x9:
15x15:
Side note: The median algorithm implementation above is very slow. Whether using C++'s nth_elementfunction or the toy 'selectKth' here, both provide little benefit for a median of 9 or 25 numbers. Nomatter what the theoretical complexity of the algorithm on large N is, if you only operate on a certainsmall finite sized input, you need to take what works best for that input size.
If you want to implement, say, median with 3x3, then you get the fastest solution by using a hardcodedsorting network of size 9 of which you take the middle output to get the median. Then apply this for every outputpixel to the corresponding 9 input pixels, and this all per color channel. The advantage of hardcodedis that the algorithm does not need to contain conditionals that depend on the size of the input (conditionals,like ifs and the for loop conditions, are very slow for CPUs as they interrupt the pipeline). No code isprovided here since an efficiant practical implementation is beyond the scope of this tutorial.If interested, look up sorting network, it is a hardcoded series of swaps of two numbers depending on whichis the maximum, find one that is proven to be optimal for the desired input size. Then since we don't want tofully sort but only take the median element, you can leave out every swap that does not contribute to themiddle element output, and replace any swap of which only oneoutput contributes to the middle output element with either min or max. That will give the theoreticallyfastest possible implementation, speedups on top of that can only be to make use of parallelismand/or better CPU instructions.
Conclusion
This article contained code to apply convolution filters on images,and showed a few different filters and their result. These are onlythe very basics of image filtering, with bigger filters and a lotof tweaking you can get much better filters.The Fourier Transform article shows a different way to filterimages, in the frequency domain. There Low Pass, High Pass and BandPass filters are discussed.
Copyright (c) 2004-2018 by Lode Vandevenne. All rights reserved.