German umlauts with imagepng bad output - php

Question

I know that the German umlauts output with PHP, can get fixed by using the
header('Content-Type: text/html; charset=utf-8');
at the top of the PHP as shown below.
<?php
header('Content-Type: text/html; charset=utf-8');
echo "<h2>German umlauts: ÄÖÜäöüß</h2>";
echo "<br />";
echo "<h2>Dr. Jörg Großhaderner</h2>";
echo "<br /><br />";
echo '<img src="image.php">';
?>
But there is trouble displaying them on an imagepng code shown below for your review and test.
File: image.php
<?php
header('Content-Type: text/html; charset=utf-8');
$idnum = "ER-CW-R112-DOC1297";
$title = "Dr.";
$firstname = "Jörg";
$lastname = "Großhaderner";
$ward = "Cardiothoracic Ward";
$callcode = "CW894";
// load the image from the file specified as background layout
$im = imagecreatefrompng("images/tempcard1.png");
// if there's an error, stop processing the page:
if(!$im)
{
die("Error creating the temp card!");
}
// define some colours to use with the fonts
$black = imagecolorallocate($im, 0, 0, 0);
$red = imagecolorallocate($im, 255, 0, 0);
$blue = imagecolorallocate($im, 0, 0, 255);
// define the font and some font sizes
$fontsize = 5;
// finally, write the string:
imagestring($im, $fontsize, 130, 105, $idnum , $red);
imagestring($im, $fontsize, 110, 135, $title , $black);
imagestring($im, $fontsize, 140, 135, $firstname , $black);
imagestring($im, $fontsize, 190, 135, $lastname , $black);
imagestring($im, $fontsize, 125, 155, $ward, $black);
imagestring($im, $fontsize, 190, 175, $callcode, $blue);
// output the image
// tell the browser what we're sending it
header('Content-type: image/png; charset=utf-8');
//header('Content-type: image/png;');
// output the image as a png
imagepng($im);
// tidy up
imagedestroy($im);
?>
Files/Links:
screen_shot
temp_card

Answer 1

Updated working image.php:
Thanks to Bernard for his guiding comment.
<?php
header('Content-Type: text/html; charset=utf-8');
$idnum = "ER-CW-R112-DOC1297";
$title = "Dr.";
$firstname = "Jörg";
$lastname = "Großhaderner";
$ward = "Cardiothoracic Ward";
$callcode = "CW894";
// load the image from the file specified as background layout
$im = imagecreatefrompng("images/tempcard1.png");
// if there's an error, stop processing the page:
if(!$im)
{
die("Error creating the temp card!");
}
// define some colours to use with the fonts
$black = imagecolorallocate($im, 0, 0, 0);
$red = imagecolorallocate($im, 255, 0, 0);
$blue = imagecolorallocate($im, 0, 0, 255);
// define the font and some font sizes
$font = 'fonts/OpenSans-Bold.ttf'; // <- This is the font supporting German umlauts
$fontsize = 17;
// finally, write the string:
/*
imagestring($im, $fontsize, 130, 105, $idnum , $red);
imagestring($im, $fontsize, 110, 135, $title , $black);
imagestring($im, $fontsize, 140, 135, $firstname , $black);
imagestring($im, $fontsize, 190, 135, $lastname , $black);
imagestring($im, $fontsize, 125, 155, $ward, $black);
imagestring($im, $fontsize, 190, 175, $callcode, $blue);
*/
/**
* Changed to imagettftext instead of imagestring as per Bernard's comment and works.
* https://stackoverflow.com/users/4401439/bernhard
*/
imagettftext($im, $fontsize, 0, 90, 130, $red, $font, $idnum);
imagettftext($im, $fontsize, 0, 85, 160, $black, $font, $title);
imagettftext($im, $fontsize, 0, 125, 160, $black, $font, $firstname);
imagettftext($im, $fontsize, 0, 175, 160, $black, $font, $lastname);
imagettftext($im, $fontsize, 0, 90, 195, $black, $font, $ward);
imagettftext($im, $fontsize, 0, 160, 220, $blue, $font, $callcode);
// output the image
// tell the browser what we're sending it
header('Content-type: image/png;');
// output the image as a png
imagepng($im);
// tidy up
imagedestroy($im);
Hope it helps others as well.
Screenshot: