How do I outline an image ?

General
1

I shared above the test image I want to set an outline to. Of course, this is an example of what I want to work on.

The outline is not a rectangle nor a circle nor…, but a two pixels (or more) black dots all around (and inside the two 'a’s) the image.

I’ve made two kinds of searches: programmatically (and that leaded to create two masks…) and via google: most of the answers are about how to add a rectangle around the graphic (with or without a graphic software…).
My google search sentence ended to:

site:stackoverflow.com Draw a black outline around a figure -matlab -Adobe -matplotlib -Text

I get two different results with my current code:
the same image, but black instead of red,
the above inverted image (the original image in white, the remainding of the image is black).

Now, I test two pixels in two loops: the first is white, the second is not white: I draw a black pixel. That meant (in my mind) I found the first pixel of an image, but I was wrong, this does not works.
I am short of testing ideas / google search sentence.

Ideas are welcome.

2

Here’s some code I wrote for someone on the forum that uses GDI+ in Widnows. Don’t ask me to do it on mac :slight_smile:

https://www.dropbox.com/s/700epl686afoln1/OutlineText.xojo_binary_project?dl=0

3

Thanks Julian, I will explorate the project.

Once I can run Windows ! :wink:

4

It seems that my code holded only a part of what it have to be.

The artwork below draws the horizontal dots (before and after). All I need to add are vertical dots (before and after):

Result for the far above example (red) image.

5

I had the basic (when I asked the question), all I had to do was to push the basic idea a bit further:


This image (above) had the original in Red and the outlined in black…

6

What do the code ?

In a two loops (x,y: For x =0 to Image.Width / for y = 0 to image.Height):
Search in the horizontally: the first non white dot and draw a black one 1 pixel before it
the next non white dot and draw a black one 1 pixel after it

Search in the vertictally:
the first non white dot and draw a black one 1 pixel before it
the next non white dot and draw a black one 1 pixel after it

My original code do only one search/draw, the one from yesterday do two search/draw (horizontal) and I added the two vertical searches/draw minutes ago…

7

Not at my Dev. Machine. Can’t test by myself. :slight_smile:

Do you still need 2 loops if you make the “Pen” 2-3 pixels wide?

And how about not looking for white/non white pixel, but checking the HSV values and put a dot if a hue or saturation value is above/blow a specific value? :smiley:

8

I do not know, I started with two loops and I do not even use the loop indices…

That’s an idea to follow.

The base idea is to use the magic wand to get low colored (non black) pixels and then to add a black outline (for better looking) instead or using the pen and eraser who will take hours to do…

I prefer to use a click in a button instead of wasting hours…

Usually, when I get the code in mind before writing a project, I have it complete; this time I do not realised I only have 25% :wink:

9

As so often, there are so many ways to do it. :smiley:

If it’s always Text and you know the font, type & content, just draw the String 2 times. First a bit taller and drak and then in it’s targetet size with the correct color above the first string.

Or create a Mask, make it bigger and draw the image a bit darker and then the original above it (needs an alpha).

Scan the Image pixel by pixel and draw points where needed (as you did now).

Blur the image, make it a bit darker and draw the original on top of it.

and so… :wink:

10

I’d better use a different image. Of course, visually, this looks like text, but this is an image (as will be everything I will outline).

OK. Back to the loops: I removed one of the two loops (alternatively, x, then y): both are needed.

The Mask idea can be followed; I do not think at that.

You probably do not realized, but the main use will be for Comics logo. Some can be representing text, some may represent real artworks. Most of the time, there is black or dark around (sometimes above) the “text” / artwork. Using the magic want allow me to take the inside of the logo; I can complete it, then I have to outline it.

Yes, very specific use.

11

As long as the result is like you want it to be, your method is fine. I’d recommend to not full the Image Size over and over again. I think performance wise, it’s a bit faster do it like this:

[code]Dim intWidth As Integer = Image.Width
Dim intHeight As Integer = Image.Height
Dim X,Y As Integer

For X = 0 To intWidth

For Y = 0 To intHeight

// Do stuff here

Next Y

Next X[/code]

12

I already have my code there.

And my base image(s) are small, so speed is not an issue (yet).

At last, I’m stuck with 32 bits stand alone(s)