DrawString on to an image (text on an image)

[=?Utf-8?B?SlIx?=]

I would like to add text to an image. I have tried to use DrawString and it
works on some images but on others it is very very small. I am pretty sure
it has something to do with the size of the image but I have had varying
results on multiple images.

Is there anyway to make the text a fixed size on the image. Similar to
putting a date on a photograph.

[Oliver Sturm]

Hello JR1,

>I would like to add text to an image. I have tried to use DrawString and
it
works on some images but on others it is very very small. I am pretty sure
it has something to do with the size of the image but I have had varying
results on multiple images.

Sure it has to do with the size of the image... you don't mention what
"varying results" you have seen.

>Is there anyway to make the text a fixed size on the image. Similar to
putting a date on a photograph.

I believe (hard to say for sure without seeing your code) your problem is
that actually the text is a fixed size right now. What you'd need to do is
calculate the font size you use in relation to the image size. But it
really also depends on how you look at the image in the end...

Let me try to explain. Consider for a moment an image that's 100 pixels
high. If you draw some text on it that has a font height of 10 pixels,
that text would obviously take up 10% of the image's height. Assuming
you'd display that image somewhere at a 1:1 translation, meaning 1 pixel
in the image would take up exactly 1 pixel on screen, that might just look
alright, even though the 10 pixel height of the text would be pretty small.

Now let's assume you might be looking at a photo with a pretty high
resolution. This might easily be a few thousand pixels high - let's assume
3000 for the example. If you'd draw a 10 pixel high line of text on that
photo and display the image at a 1:1 translation on screen, the 10 pixel
high text would still be 10 pixels high, right? Should appear exactly the
same size as before. The real trouble is that you probably wouldn't want
to display the image on screen at that 1:1 translation, because on an
average screen of around 1000 pixels height, you'd see only a third of
that image. So maybe you'd use a 1:3 translation, effectively scaling the
image down to a third of its height to display it on screen completely.
Now the problem with that would be that your text, having been drawn in 10
pixels height originally, would be down to 3 or 4 pixels after the
scaling, rendering it unreadable.

There's no one solution to that problem that always works. For instance,
you could decide to render the text at 30 pixels height, if you knew that
a display translation of 1:3 would be used. But that could be wrong if
somebody wanted to use a 1:4 translation on an even smaller display, so
you'd have to calculate that at the point where you know what the
translation is going to be.

The other option would be to calculate your text height as a proportion of
the image height - in my first example, we were at 10%, so for the second
example, you'd arrive at 300 pixels using that approach! Of course the
text would now look a lot bigger in the second image, even with the 1:3
translation. You'd have to use a 10:1 translation for the first image,
scaling it up to the whole screen height, to get the text size to be the
same for comparison purposes. But the mathematics work - in both cases
you'd end up displaying a 100 pixel high string on screen.

I hope I haven't confused you completely now.... the gist of the whole
story is that you can make the decision about the font size at various
different points, and there is no "correct" point where that decision
should be made. It depends on the purpose of your application, and doing
it one way may always have drawbacks when looking from a different
perspective.
Oliver Sturm
--
http://www.sturmnet.org/blog

[=?Utf-8?B?SlIx?=]

Thank you very much for your detailed response! In my particular case the
images are all viewed at approximately the same size, regarless of what the
resolution of the actual image was taken at. So that being said, if I have
an image and I know that I will be viewing it at a resolution of A x B (which
could be the native resolution or a 1 : 3 transalation) how do I determine:
1st the scale at which I should draw the font and 2nd what function should be
called to set it.
Here is a sample of the code I am using now:

RasterImageGdiP lusGraphicsCont ainer container =
viewer.Image.Cr eateGdiPlusGrap hics();
container.Graph ics.SmoothingMo de = SmoothingMode.H ighQuality;
Brush bru = new SolidBrush(Colo r.OrangeRed);
Font font1 = new Font(FontFamily .GenericSansSer if, 12,
FontStyle.Bold) ;
PointF point1 = new PointF(1, 1);
container.Graph ics.DrawString( "01/01/2006", font1, bru, 1, 1);
viewer.Refresh( );

When I change the font size it does nothing on the image. Is there a
function that you know of that will give me the current resolution of the
image and then I can calculate it from there. Then how do I go about writing
the text at that scale.

Thanks again for your help!!


"Oliver Sturm" wrote:

Hello JR1,

I would like to add text to an image. I have tried to use DrawString and
it
works on some images but on others it is very very small. I am pretty sure
it has something to do with the size of the image but I have had varying
results on multiple images.

Sure it has to do with the size of the image... you don't mention what
"varying results" you have seen.

Is there anyway to make the text a fixed size on the image. Similar to
putting a date on a photograph.

I believe (hard to say for sure without seeing your code) your problem is
that actually the text is a fixed size right now. What you'd need to do is
calculate the font size you use in relation to the image size. But it
really also depends on how you look at the image in the end...

Let me try to explain. Consider for a moment an image that's 100 pixels
high. If you draw some text on it that has a font height of 10 pixels,
that text would obviously take up 10% of the image's height. Assuming
you'd display that image somewhere at a 1:1 translation, meaning 1 pixel
in the image would take up exactly 1 pixel on screen, that might just look
alright, even though the 10 pixel height of the text would be pretty small.

Now let's assume you might be looking at a photo with a pretty high
resolution. This might easily be a few thousand pixels high - let's assume
3000 for the example. If you'd draw a 10 pixel high line of text on that
photo and display the image at a 1:1 translation on screen, the 10 pixel
high text would still be 10 pixels high, right? Should appear exactly the
same size as before. The real trouble is that you probably wouldn't want
to display the image on screen at that 1:1 translation, because on an
average screen of around 1000 pixels height, you'd see only a third of
that image. So maybe you'd use a 1:3 translation, effectively scaling the
image down to a third of its height to display it on screen completely.
Now the problem with that would be that your text, having been drawn in 10
pixels height originally, would be down to 3 or 4 pixels after the
scaling, rendering it unreadable.

There's no one solution to that problem that always works. For instance,
you could decide to render the text at 30 pixels height, if you knew that
a display translation of 1:3 would be used. But that could be wrong if
somebody wanted to use a 1:4 translation on an even smaller display, so
you'd have to calculate that at the point where you know what the
translation is going to be.

The other option would be to calculate your text height as a proportion of
the image height - in my first example, we were at 10%, so for the second
example, you'd arrive at 300 pixels using that approach! Of course the
text would now look a lot bigger in the second image, even with the 1:3
translation. You'd have to use a 10:1 translation for the first image,
scaling it up to the whole screen height, to get the text size to be the
same for comparison purposes. But the mathematics work - in both cases
you'd end up displaying a 100 pixel high string on screen.

I hope I haven't confused you completely now.... the gist of the whole
story is that you can make the decision about the font size at various
different points, and there is no "correct" point where that decision
should be made. It depends on the purpose of your application, and doing
it one way may always have drawbacks when looking from a different
perspective.
Oliver Sturm
--
http://www.sturmnet.org/blog

[Oliver Sturm]

Hello JR1,

>Thank you very much for your detailed response! In my particular case
the
images are all viewed at approximately the same size, regarless of what the
resolution of the actual image was taken at. So that being said, if I have
an image and I know that I will be viewing it at a resolution of A x B
(which
could be the native resolution or a 1 : 3 transalation) how do I determine:
1st the scale at which I should draw the font

Assuming you have these values:

int imageHeightInPi xels = ...;
int displayBoxHeigh tInPixels = ...;
int targetTextHeigh tInPixels = ...;

You could calculate the font size in pixels like this:

int fontSize = targetTextHeigh tInPixels * imageHeightInPi xels / displayBoxHeigh tInPixels;

Then you'd use that font size when constructing your font object:

Font font1 = new Font(FontFamily .GenericSansSer if, fontSize, FontStyle.Bold, GraphicsUnit.Pi xel);

I haven't done an actual test right now, but I can't imagine that
shouldn't change the text on your image. Let me know if it works!
Oliver Sturm
--
http://www.sturmnet.org/blog