Highlighted

Curious - get width of text string (not length) based upon font size?

LEGEND ,
Jun 28, 2016

Copy link to clipboard

Copied

Hello, all,

I know.  The question in the title can be a bit confounding.  It is to me, too, and I wrote it! 

I'm trying to dynamically add watermarking to images using imageDrawText().  A company name centered in the image.

Now, if the only word(s) used are, say, a company name, then it's not a stretch to just play around with arguments until the text is centered on the image.

But, what do you do if the text could change from image to image??  Suppose, for this hypothetical scenario, that after the company name the photographer's first and last name will be below the company name, and said names are of various lengths.  And to make things even MORE interesting, the images used are different sizes and a mix of landscape and portrait oriented images.

I'm trying to create code that will dynamically center the text on every image in a directory.  Understandably, I'd have to get the width and height of the image, divide by two to get dead-center, then offset by the width/height of the text.  So, if I'm creating different text for each image which are all different sizes, how does one calculate the offset?

I'm stepping out for a smoke.  I'll post some pseudo-code when I get back.

V/r,

^_^

Views

155

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Curious - get width of text string (not length) based upon font size?

LEGEND ,
Jun 28, 2016

Copy link to clipboard

Copied

Hello, all,

I know.  The question in the title can be a bit confounding.  It is to me, too, and I wrote it! 

I'm trying to dynamically add watermarking to images using imageDrawText().  A company name centered in the image.

Now, if the only word(s) used are, say, a company name, then it's not a stretch to just play around with arguments until the text is centered on the image.

But, what do you do if the text could change from image to image??  Suppose, for this hypothetical scenario, that after the company name the photographer's first and last name will be below the company name, and said names are of various lengths.  And to make things even MORE interesting, the images used are different sizes and a mix of landscape and portrait oriented images.

I'm trying to create code that will dynamically center the text on every image in a directory.  Understandably, I'd have to get the width and height of the image, divide by two to get dead-center, then offset by the width/height of the text.  So, if I'm creating different text for each image which are all different sizes, how does one calculate the offset?

I'm stepping out for a smoke.  I'll post some pseudo-code when I get back.

V/r,

^_^

Views

156

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jun 28, 2016 0
LEGEND ,
Jun 28, 2016

Copy link to clipboard

Copied

Okay.. here is some code.  This gets a list of images in a folder, and loops through the query object, manipulating the images for display.  As you can see, the text used for the watermark is set and I can play with the numbers to get it centered vertically and horizontally.

  <cfdirectory directory="#ExpandPath('./img/testing/')#" action="list" name="testImages" recurse="no" />
  <cfloop query="testImages">
  <cfscript>
      myImage = imageNew(testImages.directory & '/' & testImages.name);
      imageSetAntiAliasing(myImage,'on');
      attr = StructNew();
      attr.size = 70;
      attr.font = 'Arial';
      attr.fontweight = 'bold';
      imageSetDrawingColor(myImage,'black');
      myImageStats = imageInfo(myImage);
      if(myImageStats.width gt 1000){imageResize(myImage,'1000','');}
      myImageStats = imageInfo(myImage);
      imageSetDrawingTransparency(myImage,90);
      imageShearDrawingAxis(myImage,-0.15,-0.15);
      imageDrawText(myImage,'FOOBARFOOB',(myImageStats.width\2)-180,(myImageStats.height\2)+90,attr);
  </cfscript>
  <cfimage action="writetobrowser" source="#myImage#" /><br /><br /><cfflush />
  </cfloop>

But what if I wanted to add dynamically generated text and have it centered?  How do I determine the "width" of the text, given the font size?

V/r,

^_^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 28, 2016 0
Advocate ,
Jun 28, 2016

Copy link to clipboard

Copied

There is no way to determine the pixel width of a rendered string using ColdFusion functions. You will need to use a JAVA graphics library or Microsoft .NET to do so.

Cheers

Eddie

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 28, 2016 0
LEGEND ,
Jun 28, 2016

Copy link to clipboard

Copied

I had found a Java.AWT solution created by Ben Nadel, but it isn't centering anything.  I'ma still keepin' on.

V/r,

^_^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 28, 2016 0