{"id":17095,"date":"2020-08-08T13:10:29","date_gmt":"2020-08-08T13:10:29","guid":{"rendered":"https:\/\/www.devopsschool.com\/blog\/?p=17095"},"modified":"2023-06-06T06:05:27","modified_gmt":"2023-06-06T06:05:27","slug":"how-to-convert-text-to-image-using-php","status":"publish","type":"post","link":"https:\/\/www.devopsschool.com\/blog\/how-to-convert-text-to-image-using-php\/","title":{"rendered":"How to convert Text to image using PHP"},"content":{"rendered":"\n<p>In this post, we are going to see how to change any Text to image using <strong>PHP<\/strong>. <strong>PHP <\/strong>comes with an image processing library called the <strong>GD <\/strong>library. This has many features like creating an image drawing a Text, color to the text, \u00a0<a href=\"https:\/\/nightcafe.studio\/blogs\/info\/inpainting-with-stable-diffusion-what-it-is-and-how-to-get-great-results\" target=\"_blank\" rel=\"noreferrer noopener\">stable diffusion inpainting<\/a> etc.., there many of function the those are really easy to understand are writing programs.<\/p>\n\n\n\n<p><strong>GD<\/strong> library has to be installed in your Apache server to make this script work!.<\/p>\n\n\n\n<p>When I submit a text input via an <strong>HTML <\/strong>form to the <strong>PHP <\/strong>code, then in <strong>PHP <\/strong>I invoke <strong>GD <\/strong>library functions to convert to text input into an image. I create image layers for putting the text and background. Then, I merged the layers and copy the required portion to show the final output image to the browser.<\/p>\n\n\n\n<p>Here the full code:<\/p>\n\n\n\n<p><strong>index.php<\/strong><\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/narayanlog\/a708e7edb18bd533fc5c5208a08312e0.js\"><\/script>\n\n\n\n<p><strong>style.css<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">body<\/span> {\n    <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">550px<\/span>;\n    <span class=\"hljs-attribute\">font-family<\/span>: Arial;\n}\n<span class=\"hljs-selector-id\">#submit<\/span> {\n    <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">10px<\/span> <span class=\"hljs-number\">40px<\/span>;\n    <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#586e75<\/span>;\n    <span class=\"hljs-attribute\">border<\/span>: <span class=\"hljs-number\">#485c61<\/span> <span class=\"hljs-number\">1px<\/span> solid;\n    <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#FFF<\/span>;\n    <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">2px<\/span>;\n    <span class=\"hljs-attribute\">cursor<\/span>:pointer;\n}\n<span class=\"hljs-selector-id\">#form<\/span> {\n    <span class=\"hljs-attribute\">background-color<\/span>: lightblue;\n}\n\n<span class=\"hljs-selector-class\">.form-row<\/span> {\n    <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">20px<\/span>;\n    <span class=\"hljs-attribute\">border-top<\/span>: <span class=\"hljs-number\">#8aacb7<\/span> <span class=\"hljs-number\">1px<\/span> solid;\n}\n\n<span class=\"hljs-selector-class\">.input-field<\/span> {\n    <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#FFF<\/span>;\n    <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">10px<\/span>;\n    <span class=\"hljs-attribute\">margin-left<\/span>: <span class=\"hljs-number\">15px<\/span>;\n    <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">250px<\/span>;\n    <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">2px<\/span>;\n    <span class=\"hljs-attribute\">border<\/span>: <span class=\"hljs-number\">#8aacb7<\/span> <span class=\"hljs-number\">1px<\/span> solid;\n}\n\n<span class=\"hljs-selector-class\">.button-row<\/span> {\n    <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">10px<\/span> <span class=\"hljs-number\">20px<\/span>;\n    <span class=\"hljs-attribute\">border-top<\/span>: <span class=\"hljs-number\">#8aacb7<\/span> <span class=\"hljs-number\">1px<\/span> solid;\n}\n\n<span class=\"hljs-selector-id\">#validation-response<\/span> {\n    <span class=\"hljs-attribute\">display<\/span>:none;\n    <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#fdc0c0<\/span>;\n    <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">10px<\/span> <span class=\"hljs-number\">20px<\/span>;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Then, see the <strong>result<\/strong>:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"575\" height=\"164\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/text-to-image.png\" alt=\"\" class=\"wp-image-17099\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/text-to-image.png 575w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/text-to-image-300x86.png 300w\" sizes=\"auto, (max-width: 575px) 100vw, 575px\" \/><\/figure>\n\n\n\n<p>Then, put the input filed.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"569\" height=\"205\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/text-to-image1.png\" alt=\"\" class=\"wp-image-17100\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/text-to-image1.png 569w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/text-to-image1-300x108.png 300w\" sizes=\"auto, (max-width: 569px) 100vw, 569px\" \/><\/figure>\n\n\n<div class=\"epyt-gallery\" data-currpage=\"1\" id=\"epyt_gallery_24512\"><figure class=\"wp-block-embed wp-block-embed-youtube is-type-video is-provider-youtube epyt-figure\"><div class=\"wp-block-embed__wrapper\"><iframe loading=\"lazy\"  id=\"_ytid_44962\"  width=\"760\" height=\"427\"  data-origwidth=\"760\" data-origheight=\"427\" src=\"https:\/\/www.youtube.com\/embed\/?enablejsapi=1&#038;autoplay=0&#038;cc_load_policy=0&#038;cc_lang_pref=&#038;iv_load_policy=1&#038;loop=0&#038;rel=1&#038;fs=1&#038;playsinline=0&#038;autohide=2&#038;theme=dark&#038;color=red&#038;controls=1&#038;disablekb=0&#038;\" class=\"__youtube_prefs__  no-lazyload\" title=\"YouTube player\"  data-epytgalleryid=\"epyt_gallery_24512\"  allow=\"fullscreen; accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen data-no-lazy=\"1\" data-skipgform_ajax_framebjll=\"\"><\/iframe><\/div><\/figure><div class=\"epyt-gallery-list\"><div>Sorry, there was a YouTube error.<\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>In this post, we are going to see how to change any Text to image using PHP. PHP comes with an image processing library called the GD&#8230; <\/p>\n","protected":false},"author":9,"featured_media":17101,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_joinchat":[],"footnotes":""},"categories":[5150],"tags":[4459,177],"class_list":["post-17095","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-php","tag-html","tag-php"],"_links":{"self":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/17095","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/comments?post=17095"}],"version-history":[{"count":3,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/17095\/revisions"}],"predecessor-version":[{"id":35908,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/17095\/revisions\/35908"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media\/17101"}],"wp:attachment":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media?parent=17095"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/categories?post=17095"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/tags?post=17095"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}