Custom font from file.

Apr 17, 2014 at 7:02 AM
Can I load a font off the file system to write over an image?
Or better yet from a byte array so I can do some caching and what not?
Coordinator
Apr 17, 2014 at 7:52 AM
It might be possible to load custom fonts from disk but I will have to look into this for you. Can you post a code sample of how you are writing the text on top of the image and the font file? This will make it easier for me to try to add this feature to Magick.NET. Loading from a byte array is not possible. We are planning to add some sort of internal caching of fonts to ImageMagick but I have no idea when this will be done.
Apr 18, 2014 at 2:52 AM
This is a generic example of what I'm trying to accomplish:

http://www.hetemeel.com/einsteinform.php
http://www.hetemeel.com/einsteinshow.php?text=Magick.net+Component

To accomplish this I used the image here:
http://www.hetemeel.com/einsteinshow.php?text=

And the .ttf:
http://www.fontspace.com/david-kerkhoff/dk-crayon-crumble (in white).


I've been able to do it with another component (ImageDraw), but your solution looks more promising (more features and activity).
Coordinator
Apr 18, 2014 at 7:17 PM
It seems you can just specify the font with the file name. I was unaware that this was possible. The following code will use your font and draws some text on the image:
using (MagickImage image = new MagickImage("einsteinshow.jpg"))
{
  DrawableFont font = new DrawableFont(@"D:\Fonts\DK Crayon Crumble.ttf");
  DrawablePointSize size = new DrawablePointSize(72);
  DrawableStrokeColor strokeColor = new DrawableStrokeColor(new MagickColor("#fff"));
  DrawableFillColor fillColor = new DrawableFillColor(new MagickColor("#fff"));
  DrawableText text = new DrawableText(200, 100, "Magick.NET");
  image.Draw(font, size, strokeColor, fillColor, text);
  image.Write("einsteinshow.magick.jpg");
}
Apr 19, 2014 at 12:39 AM
Thank you VERY much.
Sorry to bother you with that dumb question, when I saw the parameter for "family", I assumed it was for an installed font.

I've got a couple more questions.
The text appears to be bold, can set/unset that option?
Can I rotate the text...say 345 degrees?
etc...

I'm not asking you to solve all my problems, I'm just looking for some general guidance.
I've got no problem just experimenting and figuring things out...but I get a little lost since I'm just starting out.

Is there other documentation that I don't know about?
Are there other related projects that might give me some hints.

Again, thanks a ton getting me this far.
Coordinator
Apr 19, 2014 at 7:08 PM
Edited Apr 19, 2014 at 7:16 PM
You should take a look at the Drawable classes in the code completion of Visual Studio. And it will take a lot of trail and error :)

Maybe you already found the following link on the documentation page but the examples from Anthony are great: http://www.imagemagick.org/Usage/.

To answer both your questions:

If you to make the text 'less bold' you should set the strokeColor to transparent:
DrawableStrokeColor strokeColor = new DrawableStrokeColor(MagickColor.Transparent);
And with the DrawableRotation class you can rotate the text:
DrawableRotation rotate = new DrawableRotation(345);
image.Draw(font, size, strokeColor, fillColor, rotate, text);
Jun 7, 2015 at 11:11 PM
Hi. I've tried the method above, as well as adding the font to a types.xml that I've placed in the bin directory of my web application (I don't have access to directories outside the web root). My code uses the HttpSeverUtility.MapPath method to get an absolute path to a ttf file in the web application like so:
DrawableFont font = new DrawableFont(HttpContext.Current.Server.MapPath("/includes/font/boton-700-webfont.tff"));
DrawablePointSize size = new DrawablePointSize(24);
DrawableStrokeColor strokeColor = new DrawableStrokeColor(new MagickColor("#FFF"));
DrawableFillColor fillColor = new DrawableFillColor(new MagickColor("#FFF"));
DrawableText drawableText = new DrawableText(135, 730, text);
result.Draw(font, size, strokeColor, fillColor, drawableText);
But using a path like "D:\another-random-font.ttf" doesn't work either. The text is rendered, but using a plain (Sans-serif) font.

The types.xml (generated by imagick_type_gen with the path to the ttf file as argument) looks like this:
<?xml version="1.0"?>
<typemap>

  <type
     format="ttf"
     name="BotonB"
     fullname="Boton Bold"
     family="Boton"
     glyphs="D:\www\MyApp\Website\includes\font\boton-700-webfont.ttf"
     />

</typemap>
Maybe the types.xml file is in the wrong location, but I'd rather use a path anyway. What am I doing wrong?

Thanks in advance.
Coordinator
Jun 8, 2015 at 5:03 AM
Can you add a link to the font that you are using?
Jun 8, 2015 at 6:52 AM
Unfortunately, I can't. This is a licensed font that is created for a client. I can send it through e-mail though. I've sent a message via the codeplex contact form.
I've tried other fonts as well, but if you can suggest one that should work, I'll test with that.

Regards,
Matthijs
Jun 8, 2015 at 8:08 AM
Hi. Looking at my code again, I discovered my EPIC FAIL! Instead of "path/to/font.ttf", I had "path/to/font.tff"! We don't use True-Fail Fonts yet...
That's what you get when coding at 1 AM in the weekends...

Thanks for your help.
Best regards,
Matthijs
Coordinator
Jun 8, 2015 at 8:11 AM
I am happy to hear that you figured out how to solve it. I did not get your message through CodePlex, did you get mine?
Jun 8, 2015 at 10:37 AM
No, I didn't get a message either. Strange.