text position according to text's top left corner

[jueljust]

i'm working to build an online image editor, it has one feature to add text on image
the problem is that i can just got the text's top-left corner position in the image from the web page,
and imagemagick require text's baseline position,
so does imagemagick support to declare or set text position according to text's top-left corner?

cheers
gucci

[anthony]

Once text has been 'drawn' it no longer has a 'baseline'.

You will need to use some method of saving 'baseline' information with the text image. Also probably the caret start and end positions within the image should be saved as well. The caret start would (normally) also provide you with the 'baseline' for the image.

Both points may be needed as the text within the image may have been drawn rotated, and that means that while the caret start point will include baseline information, the baseline itself may not be horizontal.

Add to that you have languages like Arabic, where text is draw right to left, or a 'traditional' Chinese/Japanese text string which flow top to bottom, and you start to get an idea of problems you may face.

The key however is caret meta-data. How that information should be saved in image file formats is another matter. It may be something that some other application already has a solution for, look around, and let us know.

[jueljust]

thank you for your reply sp quick, i've found a way to get baseline position from web page.

[anthony]

Oh can you enlighten us with more information?

[Bonzo]

An idea how to do it with php would be to write the text to a tempory image, -trim it, get the size using getimagesize( ), do some calcualtions, and compose the text image onto the original.

[anthony]

Thanks Bonzo I know about that. I doumented it in IM examples. I was more interested in what jueljust discovered to solve his baseline problem.

[jueljust]

just use one img tag(even without source file) and one char with any font in any size,

• text has no margin or padding

• set the image height = font size

• and let text and img vertical-align according to baseline

like the follow

Code: Select all

<span style="vertical-align : baseline; font-size:100px; font-family:'Arial Black'; ">
<img id="img" src=''style="border:none;height:100px;" />
<nobr id="txt" style="margin:0;padding:0">A</nobr>
</span>

then we use javascript got the baseline offset

Code: Select all

baselineOffset = txt.offsetHeight+img.offsetTop-txt.offsetTop