Skip to main content
WolfShade
WolfShade
Legend
June 28, 2016
Question

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

  • June 28, 2016
  • 1 reply
  • 423 views

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,

^_^

    This topic has been closed for replies.

    1 reply

    WolfShade
    WolfShadeAuthor
    Legend
    June 28, 2016

    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,

    ^_^

    EddieLotter
    EddieLotter
    Inspiring
    June 28, 2016

    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

    WolfShade
    WolfShadeAuthor
    Legend
    June 28, 2016

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

    V/r,

    ^_^

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices