{"id":5794,"date":"2012-07-13T02:00:00","date_gmt":"2012-07-13T00:00:00","guid":{"rendered":"https:\/\/alvarotrigo.com\/epa\/using-php-gd-library-to-write-text-over-images-using-truetype-fonts\/"},"modified":"2024-02-08T00:28:50","modified_gmt":"2024-02-07T23:28:50","slug":"using-php-gd-library-to-write-text-over-images-using-truetype-fonts","status":"publish","type":"post","link":"https:\/\/alvarotrigo.com\/blog\/using-php-gd-library-to-write-text-over-images-using-truetype-fonts\/","title":{"rendered":"Using php GD Library to write text over images using TrueType fonts"},"content":{"rendered":"\n<p>Once i needed to write text over an image and generate a final image with it.<br>\nIn order to do it, i used the php GD library functions and a TrueType font as i wanted to use high font sizes.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" data-src=\"https:\/\/alvarotrigo.com\/blog\/demos\/imgs\/textPainter.jpg\" alt=\"TrueType php GD Library\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" \/><\/figure>\n\n\n\n<p>Now, i have created a PHP class to facilitate all this process.<br>\nIt is compatible with the following image formats:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>jpg \/ jpeg<\/li>\n\n\n\n<li>png<\/li>\n\n\n\n<li>gif<\/li>\n\n\n\n<li>wbmp<\/li>\n<\/ul>\n\n\n\n<p>And it allows us to positionate the text wherever we want under predefied positions or custom ones.<\/p>\n\n\n\n<p>It is extremely simple to use, see this example:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\"><span class=\"hljs-keyword\">require_once<\/span> <span class=\"hljs-string\">'class.textPainter.php'<\/span>;\n$img = <span class=\"hljs-keyword\">new<\/span> textPainter(<span class=\"hljs-string\">'.\/imgs\/image.jpg'<\/span>, <span class=\"hljs-string\">'Hello world!!'<\/span>, <span class=\"hljs-string\">'.\/Franklin.ttf'<\/span>, <span class=\"hljs-number\">50<\/span>);\n$img-&gt;show();\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>That would be all, for the most simple case.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/alvarotrigo.com\/blog\/demos\/writingOverImageFile.php\" title=\"See Demo\" target=\"_blank\" rel=\"noopener\">See Demo<\/a><\/div>\n\n\n\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/github.com\/alvarotrigo\/PHP-Backend\/tree\/master\/textPainter\" title=\"View on GitHub\" target=\"_blank\" rel=\"noopener nofollow\">View on GitHub<\/a><\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"code-for-my-demo\">Code for my demo<\/h2>\n\n\n\n<p>As an example of how to use it, you can take a look at the code of my demo:<\/p>\n\n\n\n<p><strong>WRITINGOVERIMAGEFILE.PHP<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-meta\">&lt;!DOCTYPE <span class=\"hljs-meta-keyword\">html<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span> <span class=\"hljs-attr\">lang<\/span>=<span class=\"hljs-string\">\"en\"<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">http-equiv<\/span>=<span class=\"hljs-string\">\"Content-Type\"<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">\"text\/html; charset=utf-8\"<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>Floating window with tabs<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">style<\/span>&gt;<\/span><span class=\"css\">\n\n<span class=\"hljs-comment\">\/*\nThis defines the workspace where i place the demo.\n*\/<\/span>\n<span class=\"hljs-selector-id\">#container<\/span> {\n    <span class=\"hljs-attribute\">text-align<\/span>: left;\n    <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#FFF<\/span>;\n    <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">865px<\/span>;\n    <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">20px<\/span> auto;\n    <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">20px<\/span>;\n    <span class=\"hljs-attribute\">border-left<\/span>: <span class=\"hljs-number\">1px<\/span> solid <span class=\"hljs-number\">#CCC<\/span>;\n    <span class=\"hljs-attribute\">border-right<\/span>: <span class=\"hljs-number\">1px<\/span> solid <span class=\"hljs-number\">#CCC<\/span>;\n    <span class=\"hljs-attribute\">-moz-box-shadow<\/span>: <span class=\"hljs-number\">0px<\/span> <span class=\"hljs-number\">0px<\/span> <span class=\"hljs-number\">10px<\/span> <span class=\"hljs-number\">#BBB<\/span>;\n    <span class=\"hljs-attribute\">-webkit-box-shadow<\/span>: <span class=\"hljs-number\">0px<\/span> <span class=\"hljs-number\">0px<\/span> <span class=\"hljs-number\">10px<\/span> <span class=\"hljs-number\">#BBB<\/span>;\n    <span class=\"hljs-attribute\">box-shadow<\/span>: <span class=\"hljs-number\">0px<\/span> <span class=\"hljs-number\">0px<\/span> <span class=\"hljs-number\">10px<\/span> <span class=\"hljs-number\">#BBB<\/span>;\n}\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">style<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"container\"<\/span>&gt;<\/span>\n    <span class=\"php\"><span class=\"hljs-meta\">&lt;?php<\/span>\n        <span class=\"hljs-keyword\">if<\/span>($_POST&#91;<span class=\"hljs-string\">\"sending\"<\/span>]==<span class=\"hljs-string\">\"yes\"<\/span>){\n            <span class=\"hljs-keyword\">if<\/span>(strlen($_POST&#91;<span class=\"hljs-string\">\"text\"<\/span>]&lt;<span class=\"hljs-number\">50<\/span>)){\n                <span class=\"hljs-keyword\">echo<\/span> <span class=\"hljs-string\">'\n                    &lt;img id=\"imgFinal\" src=\"writingOverImage.php?size=50&amp;text='<\/span>.$_POST&#91;<span class=\"hljs-string\">\"text\"<\/span>].<span class=\"hljs-string\">'\" \/&gt;\n\n                    &lt;img id=\"imgFinal\" src=\"writingOverImage.php?x=right&amp;y=center&amp;size=30&amp;r=74&amp;g=50&amp;b=170&amp;text='<\/span>.$_POST&#91;<span class=\"hljs-string\">\"text\"<\/span>].<span class=\"hljs-string\">'\" \/&gt;\n\n                    &lt;img id=\"imgFinal\" src=\"writingOverImage.php?x=left&amp;y=bottom&amp;size=90&amp;text='<\/span>.$_POST&#91;<span class=\"hljs-string\">\"text\"<\/span>].<span class=\"hljs-string\">'\" \/&gt;\n                '<\/span>;\n            }\n            <span class=\"hljs-keyword\">else<\/span>{\n                <span class=\"hljs-keyword\">echo<\/span> <span class=\"hljs-string\">\"The text is too large for my demo!! \"<\/span>;\n            }\n        }\n        <span class=\"hljs-keyword\">else<\/span>{\n            <span class=\"hljs-keyword\">echo<\/span> <span class=\"hljs-string\">'\n                &lt;img id=\"imgFinal\" src=\"writingOverImage.php?size=50&amp;text=Hello world!!\" \/&gt;\n            '<\/span>;\n\n        }\n    <span class=\"hljs-meta\">?&gt;<\/span><\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">form<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"formulario\"<\/span> <span class=\"hljs-attr\">action<\/span>=<span class=\"hljs-string\">\"\"<\/span> <span class=\"hljs-attr\">method<\/span>=<span class=\"hljs-string\">\"post\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"contactoFormulario\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"caja\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"text\"<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"text\"<\/span> \/&gt;<\/span>Text you want to write over the image<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"botonFormulario\"<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"submit\"<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"Submit\"<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">\"Enviar\"<\/span> \/&gt;<\/span>Generate image<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"hidden\"<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"sending\"<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">\"yes\"<\/span> \/&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">form<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><strong>WRITINGOVERIMAGE.PHP<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\"><span class=\"hljs-keyword\">require_once<\/span> <span class=\"hljs-string\">'textPainter.php'<\/span>;\n\n$x = $_GET&#91;<span class=\"hljs-string\">\"x\"<\/span>];\n$y = $_GET&#91;<span class=\"hljs-string\">\"y\"<\/span>];\n\n$R = $_GET&#91;<span class=\"hljs-string\">\"r\"<\/span>];\n$G = $_GET&#91;<span class=\"hljs-string\">\"g\"<\/span>];\n$B = $_GET&#91;<span class=\"hljs-string\">\"b\"<\/span>];\n\n$size = $_GET&#91;<span class=\"hljs-string\">\"size\"<\/span>];\n\n$text = $_GET&#91;<span class=\"hljs-string\">\"text\"<\/span>];\n\n\n$img = <span class=\"hljs-keyword\">new<\/span> textPainter(<span class=\"hljs-string\">'.\/imgs\/writingOverImage.jpg'<\/span>, $text, <span class=\"hljs-string\">'.\/Franklin.ttf'<\/span>, $size);\n\n<span class=\"hljs-keyword\">if<\/span>(!<span class=\"hljs-keyword\">empty<\/span>($x) &amp;&amp; !<span class=\"hljs-keyword\">empty<\/span>($y)){\n    $img-&gt;setPosition($x, $y);\n}\n\n<span class=\"hljs-keyword\">if<\/span>(!<span class=\"hljs-keyword\">empty<\/span>($R) &amp;&amp; !<span class=\"hljs-keyword\">empty<\/span>($G) &amp;&amp; !<span class=\"hljs-keyword\">empty<\/span>($B)){\n    $img-&gt;setTextColor($R,$G,$B);\n}\n\n$img-&gt;show();\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>","protected":false},"excerpt":{"rendered":"<p>Once i needed to write text over an image and generate a final image with it. In order to do it, i used the php GD library functions and a TrueType font as i wanted to use high font sizes.<\/p>\n","protected":false},"author":1,"featured_media":5793,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[105],"tags":[45,38,44],"class_list":["post-5794","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-developing","tag-backend","tag-fonts","tag-php"],"acf":[],"_links":{"self":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/5794","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/comments?post=5794"}],"version-history":[{"count":4,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/5794\/revisions"}],"predecessor-version":[{"id":9476,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/5794\/revisions\/9476"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/media\/5793"}],"wp:attachment":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/media?parent=5794"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/categories?post=5794"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/tags?post=5794"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}