Gallery
Instagram
Flickr
Pinterest
DaveCOLLIER
DevelopmentPages
Text over Image
Text Displayed over Image with Correlation
Description
Image Made of Text creates a text-filled rectangle based upon an underlying image, which may be optionally hidden or may be displayed in monochrome of any colour. The text can be user-specified or generated. If generated it is on the basis of the darkness of each character, in other words the relative number of filled pixels for each character form, matched against the relative brightness of the block from the image upon which that character is going to sit. Characters may be in solid colour, optionally based upon brightness of the underlying block, or variable in tone depending on the brightness of underlying pixels. Fonts are selected from Google fonts. Youb are presented with a range of options based upon selection criteria.
And why? What for? To see the effects, in paricular this was conceived to see whether recognisable graphic images could be created from text only. The answer is, sometimes. I do not yet know the conditions for that sometimes precisely, that is something still to be learned.
or alternatively image url apply
  – see copyright notice
......
This page requires HTML5 – and Javascript your browser version is too old for this page to work for you or you have Javascript switched off.
Formula for calculating brightness:
Page uses cookies to remember settings from one session to the next unless disallowed. Allow cookies for this purpose?
character set
font in the panel:
font size on output px
Line Height px
Text align
Left Centre Right Justify
Margins
top px right px bottom px left px
Read in text file
or paste text into this box;
or alternatively, using generated characters
processing . . .
Text colour
by brightness range:
Text brightness
by brightness range above
hue and saturation by above range; brightness of underlying image pixel block
hue and saturation by above range; individual pixels at image pixel brightness
inverse the brightnesses
Text opacity
colour-pick opacity 100%
pixels at image pixel opacity
pixels at opacity of image pixel brightness %
Background
none
unmodded
monochrome at colour-pick RGB 10,10,10  
Background opacity
colour-pick opacity 100%
from image
to paint a result, choose an image and set some text and a font
Image Rendering on fullsize
Auto
Crisp Edges
Smooth
High Quality
Pixellated
Image rendering is controlled via CSS. The options are CSS image-rendering variables, some of them produce identical results to others in some cases.
Image Smoothing Enabled on Paint
Text Background
Colour Picker
Similar Hue and Brightness
Download
......