Jump to content

Sky Slate Blueberry Blackcurrant Watermelon Strawberry Orange Banana Apple Emerald Chocolate
Photo

TextToImage 1.07 - Write text onto an image or screenshot


  • Please log in to reply
64 replies to this topic
tic
  • Members
  • 1934 posts
  • Last active: May 30 2018 08:13 PM
  • Joined: 22 Apr 2007
This is a function that can be included to your program to easily allow the user to take a screenshot of the screen or active window, or open an existing image, it can then write some text to the image, defining the size, style, font, colour and positioning and then save it in any format to another location, or overwrite the existing file. Many thanks to PhiLho, Lexikos and Sean.

An Example file is included, and the functions usage is:
TextToImage(In, Text, Output, XPos, YPos, Size, Align, Weight, Font, TColour, Style)

Header of the function:

; TextToImage v1.07 by tic
;
; TextToImage can overlay writing to a screenshot of the entire screen or active window, or from an existing image and write to file
; TextToImage(In, Text, Output, x, y, Font, TColour, Size, Weight)
;
; In: Can either be the "Screen" or "Window" and will take a screenshot of the respective choice, or the location of an exisitng image
;
; Text: This is the text to overlay onto the screenshot
;
; Output: This is the path and filename that the image will be written to.
; The extension can be .bmp,.jpg,.png,.tif,.gif and will be written as that type accordingly
;
; x: This is the x-coordinate to place the text. This coordinate will be the distance from the left the text will be placed.
; This value may be a ratio. For instance 4:5 would place the text at the position 4/5ths of the width of the image
; You must also consult which mode align is in
;
; y: This is the y-coordinate to place the text. This coordinate will be the distance from the top the text will be placed.
; This value may be a ratio. For instance 1:3 would place the text at the position 1/3ths of the height of the image
; You must also consult which mode align is in
;
; Size: This is the height of the text in pixels
;
; Align: This must have 2 styles set, The text's x placement (Left,Centre,Right) and the text's y placement (Top,Bottom)
; It must be used for example as Left|Bottom - This would place the text at the bottom of it's bounding area and aligned left
;
; Weight: This is the boldness of the text. Make the value greater to make it more bold
;
; Font: This is the font to set the text to be
; Examples are: Arial, Bookman Old Style, Times New Roman
;
; TColour: This is the colour to set the text in RGB format.
; So FF0000 is red
;
; Style: Can contain the words Underline,Italic,Strikeout and will set the text in the appropriate styles

None of the parameters are necessary, an example usage is:

TextToImage("Screen", "Some text", "file.png", "1:2", "1:2", 20, "Bottom|Centre", 400, "Arial", "ff0000", "Underline")
; Take an entire screenshot, overlay "some text" in the centre of the screen, aligned centre and bottom, in font arial,
; colour red, size 20, and underline it, and then save to "file.png"


<!-- m -->https://ahknet.autoh...TextToImage.zip<!-- m -->

tic
  • Members
  • 1934 posts
  • Last active: May 30 2018 08:13 PM
  • Joined: 22 Apr 2007
I thought someone may want a quick preview of what the function can do:

Posted Image

Andreone
  • Members
  • 257 posts
  • Last active: Mar 19 2008 05:30 PM
  • Joined: 20 Jul 2007
Nice works :) This is another good demonstration of what can be achieved using gdi+.

; TextToScreenShot can overlay writing to a screenshot of the entire screen or active window, or from an existing image and write to file

Why call it screenshot if it's not specific to screenshots? This is more a general function like TextToImage.

tic
  • Members
  • 1934 posts
  • Last active: May 30 2018 08:13 PM
  • Joined: 22 Apr 2007
Ok changed the function name. Anyone let me know if they have some other idea or preference

HuBa
  • Members
  • 175 posts
  • Last active: Feb 13 2012 09:51 AM
  • Joined: 24 Feb 2007
The screenshot is not opening for me.
I think <!-- m -->http://xs.to/<!-- m --> is a more reliable image host service, then imageshack.

tic
  • Members
  • 1934 posts
  • Last active: May 30 2018 08:13 PM
  • Joined: 22 Apr 2007
It's a png. you need xp or higher, or i think just gdi+

If it is the case that you have a earlier OS than xp, then the function can output to many image formats, so i could post it as jpg or bmp. Just let me know, as this is a very useful function i think.

HuBa
  • Members
  • 175 posts
  • Last active: Feb 13 2012 09:51 AM
  • Joined: 24 Feb 2007

It's a png. you need xp or higher, or i think just gdi+

If it is the case that you have a earlier OS than xp, then the function can output to many image formats, so i could post it as jpg or bmp. Just let me know, as this is a very useful function i think.

I mean the hosting service is extremely slow. The page is hardly loading.
Anyway, every browser supports PNG, so that's not a problem :)

tic
  • Members
  • 1934 posts
  • Last active: May 30 2018 08:13 PM
  • Joined: 22 Apr 2007
Heh yes you are right about the png. I knew that actually :oops: as I do website design, and get frustrated with IE6 and having to use js to show transparencies on my pngs, and then cant load then from css with this method. very annoying.

Anyway.....the same picture has been uploaded to the website you suggested. Obviously the function name is different to the one on the screenshot now :) There are many many more options than are displayed in that screenshot.

And added a bug fix that wouldnt allow you to specify exact coordinates rather than ratios.

Joy2DWorld
  • Members
  • 562 posts
  • Last active: Jun 30 2014 07:48 PM
  • Joined: 04 Dec 2006
neat, but, you know..

the added text sure looks, well, less then clean and impressive, in the demo screen shot.
Joyce Jamce

tic
  • Members
  • 1934 posts
  • Last active: May 30 2018 08:13 PM
  • Joined: 22 Apr 2007

neat, but, you know..

the added text sure looks, well, less then clean and impressive, in the demo screen shot.


Heh. Well it was very hard to do! As I'm sure if you look through the code you'll see ;)

What specifically don't you like about it? I'm sure anything could be fixed with some work. Try it out and then give some more feedback, there is a fully customizeable example with gui included.

bmcclure
  • Members
  • 774 posts
  • Last active: Jan 04 2014 10:44 PM
  • Joined: 24 Nov 2007
This rocks! I haven't tried it out yet, but it could really help me for two purposes:

1. To write the date and/or game name on screenshots that my script takes
2. Possibly to put the button names on my graphic buttons rather than having to make each button before-hand.

Though I'd have to save the new button to a variable and use it with AddGraphicButton, but I'm guessing that wouldn't be too difficult.

One question: Any chance of adding an option to add anti-aliasing to the text, or is that not a feature of GDI+? I think that's what Joy2DWorld was referring to as well.

Lexikos
  • Administrators
  • 9844 posts
  • AutoHotkey Foundation
  • Last active:
  • Joined: 17 Oct 2006

Nice works :) This is another good demonstration of what can be achieved using gdi+.

Not really. It uses GDI to draw the text. :lol:

the added text sure looks, well, less then clean and impressive, in the demo screen shot.

If GDI+ were used to render the text, you'd have control over text anti-aliasing.

or is that not a feature of GDI+?

Actually, TextOut (used by TextToImage) uses the system text settings. I have ClearType enabled, and if I zoom in on the rendered text, I can see it does have some anti-aliasing. It still looks rather chunky, though...

tic, if you make the link version-independent, you won't need to update your original post every time you update the script. :)

GDI+ is good to learn since unlike GDI, it supports alpha-blending. (hint hint :lol:)

bmcclure
  • Members
  • 774 posts
  • Last active: Jan 04 2014 10:44 PM
  • Joined: 24 Nov 2007
Would this function be suitable for dynamically generating my graphical GUI buttons on-the-fly as the GUI is loaded? Or do you think it would be too performance intensive to do it so often?

I suppose I could cache all the buttons upon start, and delete them upon close, but I'd prefer to have one button image and generate the rest as needed. I'd like to use this to import the new image into a variable which I pass to AddGraphicButton() (like I currently do now with pre-loading the buttons)

Edit: Also, is it possible to set letter spacing (like kerning in an image app), so as, for instance to space each letter apart a couple of extra pixels?

tic
  • Members
  • 1934 posts
  • Last active: May 30 2018 08:13 PM
  • Joined: 22 Apr 2007
Ok. 1.07 released.

Very important features. I added cleartype quality text as default, as upon review it is not as much slower as I thought it would be. Also thanks to Lexikos I have fixed a memory issue where bitmaps in memory wouldnt be deleted on function completion so would "clog" up in memory every time it was called.

Would this function be suitable for dynamically generating my graphical GUI buttons on-the-fly as the GUI is loaded? Or do you think it would be too performance intensive to do it so often?


Yes it would be fine for this. It is actually quite a fast function. For normal sized buttons it completes the function in a matter of ms, and 100ms for an entire screen (both with cleartype font)


Edit: Also, is it possible to set letter spacing (like kerning in an image app), so as, for instance to space each letter apart a couple of extra pixels?


There are about a million and one options I could add, but as you can see the options are getting a little crowded. Ill have a look and see if that can also neatly be added

tic, if you make the link version-independent, you won't need to update your original post every time you update the script.


Noted :wink:


I would like some input......
I wish to add the ability to have more than 1 pass over an image. So text could actually be overlayed over itself, creating a shadow like effect if wanted, but I need a way to send this information to the function. A separator would be needed for the 1st and 2nd pass
ie
TextToImage("Screen","Some Text|*|Some text")

What do people think would be a good separator?

Also I wish to know whether people like these ideas....
I could add the ability for the input to be a handle to an existing image, ad output to a handle
Also transparency could be set, so an example could be having a button created with this function that has text opacity at 150, and when you hover over it then it becomes 255.

In the screenshot I gave you can see I have made that winamp skin I am working on in ahk. I have also added the ability for text to scroll along the window as can be seen

Lexikos
  • Administrators
  • 9844 posts
  • AutoHotkey Foundation
  • Last active:
  • Joined: 17 Oct 2006

I could add the ability for the input to be a handle to an existing image, ad output to a handle

Would be useful in bmcclure's case - i.e. load the button image once, and generate images with text for each button without having to read from or write to disk each time.

Also transparency could be set, so an example could be having a button created with this function that has text opacity at 150, and when you hover over it then it becomes 255.

Should be very easy with GDI+, but near impossible with GDI...