{"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_82455\"><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_88586\"  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_82455\"  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 library. This has many features like creating an image drawing a Text, color to the text, \u00a0stable diffusion inpainting etc.., there many of function the those are really&#8230;<\/p>\n","protected":false},"author":9,"featured_media":17101,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","_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}]}}