{"id":9523,"date":"2024-01-09T18:03:00","date_gmt":"2024-01-09T18:03:00","guid":{"rendered":"https:\/\/codehim.com\/?p=9523"},"modified":"2024-01-22T16:05:10","modified_gmt":"2024-01-22T11:05:10","slug":"javascript-image-editor-add-text","status":"publish","type":"post","link":"https:\/\/codehim.com\/vanilla-javascript\/javascript-image-editor-add-text\/","title":{"rendered":"JavaScript Image Editor Add Text"},"content":{"rendered":"<p>This JavaScript code helps you create an image editor that adds text to images. It works by allowing you to select an image, overlay text on it, and save the result as a base64 image. The major functionality is to customize and add text to images for various purposes.<\/p>\n<p>It&#8217;s beneficial for creating personalized graphics, such as adding captions to photos, creating social media posts, or generating image-based content with dynamic text.<\/p>\n<h2>How to Create Javascript Image Editor Add Text<\/h2>\n<p>1. First of all, create the necessary HTML structure for your image editor. You can use the folloeing HTML code. It includes an image upload input, an input field for your overlay text, and a canvas element to display the edited image.<\/p>\n<pre class=\"prettyprint linenums lang-html\">&lt;h1&gt;Overlay text on canvas image and save as base64&lt;\/h1&gt;\r\n&lt;div class=\"page-wrap\"&gt;\r\n  &lt;div class=\"controls\"&gt;\r\n    &lt;input class=\"controls__input\" type=\"file\" id=\"imageLoader\" name=\"imageLoader\"\/&gt;\r\n    &lt;label class=\"controls__label\" for=\"name\"&gt;First, choose an image.&lt;\/label&gt;\r\n    \r\n    &lt;input class=\"controls__input\" id=\"name\" type=\"text\" value=\"\"\/&gt;\r\n    &lt;label class=\"controls__label\" for=\"name\"&gt;Overlay Text&lt;\/label&gt;\r\n  &lt;\/div&gt;\r\n  &lt;div id=\"canvas-wrap\"&gt;\r\n     &lt;canvas style=\"display:block\" id=\"imageCanvas\" width=400px height=400px&gt;\r\n        &lt;canvas id=\"canvasID\"&gt;&lt;\/canvas&gt;\r\n    &lt;\/canvas&gt; \r\n  &lt;\/div&gt;\r\n     &lt;button id=\"download\"&gt;Download&lt;\/button&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<p>2. The following CSS code offers basic styling for the image editor. You can modify the styles to match your website&#8217;s design and layout.<\/p>\n<pre class=\"prettyprint linenums lang-css\">body {\r\n  background: #222;\r\n  color: #fff;\r\n  position: relative;\r\n  text-align: center;\r\n  font-size: 1rem;\r\n  font-family: sans-serif;\r\n  padding-bottom: 3em;\r\n}\r\n\r\n.page-wrap {\r\n  display: inline-block;\r\n  margin: 2em auto;\r\n}\r\n\r\n.controls__input {\r\n  display: block;\r\n  margin: 0 auto;\r\n  background: none;\r\n  border: none;\r\n  font-size: 1em;\r\n  padding-bottom: 0.5em;\r\n  border-bottom: 2px solid #ccc;\r\n  text-align: center;\r\n  outline: none;\r\n  color: #fff;\r\n}\r\n.controls__btn {\r\n  background: dodgerblue;\r\n  color: #fff;\r\n  border: none;\r\n  font-size: 1em;\r\n}\r\n.controls__label {\r\n  display: block;\r\n  font-size: 0.8em;\r\n  padding-top: 0.3em;\r\n  margin-bottom: 2em;\r\n}\r\n\r\ncanvas {\r\n  background-color: #eee;\r\n  transition: opacity 0.3s;\r\n}\r\ncanvas.show {\r\n  opacity: 1;\r\n}\r\n\r\n.canvas-wrap {\r\n  margin-top: 50px;\r\n  position: relative;\r\n}\r\n\r\n#canvasID {\r\n  z-index: 9999;\r\n}<\/pre>\n<p>3. Finally, add the following JavaScript code to your project. It consists of functions that handle image loading, text overlay, and dynamic text input. It uses the HTML canvas element to display and manipulate images.<\/p>\n<pre class=\"prettyprint linenums lang-js\">var text_title =\"Overlay text\";\r\nvar imageLoader = document.getElementById('imageLoader');\r\n    imageLoader.addEventListener('change', handleImage, false);\r\nvar canvas = document.getElementById('imageCanvas');\r\nvar ctx = canvas.getContext('2d');\r\nvar img = new Image();\r\nimg.crossOrigin=\"anonymous\";\r\n\r\nwindow.addEventListener('load', DrawPlaceholder)\r\n\r\nfunction DrawPlaceholder() {\r\n    img.onload = function() {\r\n        DrawOverlay(img);\r\n        DrawText();\r\n        DynamicText(img)\r\n    };\r\n    img.src = 'https:\/\/unsplash.it\/400\/400\/?random';\r\n  \r\n}\r\nfunction DrawOverlay(img) {\r\n    ctx.drawImage(img,0,0);\r\n    ctx.fillStyle = 'rgba(30, 144, 255, 0.4)';\r\n    ctx.fillRect(0, 0, canvas.width, canvas.height);\r\n}\r\nfunction DrawText() {\r\n    ctx.fillStyle = \"white\";\r\n    ctx.textBaseline = 'middle';\r\n    ctx.font = \"50px 'Montserrat'\";\r\n    ctx.fillText(text_title, 50, 50);\r\n}\r\nfunction DynamicText(img) {\r\n  document.getElementById('name').addEventListener('keyup', function() {\r\n    ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n    DrawOverlay(img);\r\n    DrawText(); \r\n    text_title = this.value;\r\n    ctx.fillText(text_title, 50, 50);\r\n  });\r\n}\r\nfunction handleImage(e) {\r\n    var reader = new FileReader();\r\n    var img = \"\";\r\n    var src = \"\";\r\n    reader.onload = function(event) {\r\n        img = new Image();\r\n        img.onload = function() {\r\n            canvas.width = img.width;\r\n            canvas.height = img.height;\r\n            ctx.drawImage(img,0,0);\r\n        }\r\n        img.src = event.target.result;\r\n        src = event.target.result;\r\n        canvas.classList.add(\"show\");\r\n        DrawOverlay(img);\r\n        DrawText(); \r\n        DynamicText(img);   \r\n    }\r\n\r\n    reader.readAsDataURL(e.target.files[0]); \r\n \r\n}\r\nfunction convertToImage() {\r\n\twindow.open(canvas.toDataURL('png'));\r\n}\r\ndocument.getElementById('download').onclick = function download() {\r\n\t\tconvertToImage();\r\n}<\/pre>\n<p>That&#8217;s all! hopefully, you have successfully created an Image Editor to add text on it using JavaScript. If you have any questions or suggestions, feel free to comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This JavaScript code helps you create an image editor that adds text to images. It works by allowing you to&#8230;<\/p>\n","protected":false},"author":1,"featured_media":9541,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[116],"tags":[],"class_list":["post-9523","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-vanilla-javascript"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>JavaScript Image Editor Add Text &#8212; CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a free code snippet to create a JavaScript Image Editor Add Text. You can view demo and download the source code.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codehim.com\/vanilla-javascript\/javascript-image-editor-add-text\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Image Editor Add Text &#8212; CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a free code snippet to create a JavaScript Image Editor Add Text. You can view demo and download the source code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/vanilla-javascript\/javascript-image-editor-add-text\/\" \/>\n<meta property=\"og:site_name\" content=\"CodeHim\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codehimofficial\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-09T18:03:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-22T11:05:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/JavaScript-Image-Editor-Add-Text.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"960\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Asif Mughal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:site\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Asif Mughal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-image-editor-add-text\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-image-editor-add-text\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"JavaScript Image Editor Add Text\",\"datePublished\":\"2024-01-09T18:03:00+00:00\",\"dateModified\":\"2024-01-22T11:05:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-image-editor-add-text\/\"},\"wordCount\":215,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-image-editor-add-text\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/JavaScript-Image-Editor-Add-Text.png\",\"articleSection\":[\"Vanilla JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/vanilla-javascript\/javascript-image-editor-add-text\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-image-editor-add-text\/\",\"url\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-image-editor-add-text\/\",\"name\":\"JavaScript Image Editor Add Text &#8212; CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-image-editor-add-text\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-image-editor-add-text\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/JavaScript-Image-Editor-Add-Text.png\",\"datePublished\":\"2024-01-09T18:03:00+00:00\",\"dateModified\":\"2024-01-22T11:05:10+00:00\",\"description\":\"Here is a free code snippet to create a JavaScript Image Editor Add Text. You can view demo and download the source code.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-image-editor-add-text\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/vanilla-javascript\/javascript-image-editor-add-text\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-image-editor-add-text\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/JavaScript-Image-Editor-Add-Text.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/JavaScript-Image-Editor-Add-Text.png\",\"width\":1280,\"height\":960,\"caption\":\"JavaScript Image Editor Add Text\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-image-editor-add-text\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Vanilla JavaScript\",\"item\":\"https:\/\/codehim.com\/category\/vanilla-javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"JavaScript Image Editor Add Text\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codehim.com\/#website\",\"url\":\"https:\/\/codehim.com\/\",\"name\":\"CodeHim\",\"description\":\"Web Design Code Snippets\",\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"alternateName\":\"Web Design Codes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codehim.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/codehim.com\/#organization\",\"name\":\"CodeHim - Web Design Code & Scripts\",\"url\":\"https:\/\/codehim.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"contentUrl\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"width\":280,\"height\":280,\"caption\":\"CodeHim - Web Design Code & Scripts\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/codehimofficial\",\"https:\/\/x.com\/CodeHimOfficial\",\"https:\/\/www.instagram.com\/codehim\/\",\"https:\/\/www.linkedin.com\/company\/codehim\",\"https:\/\/co.pinterest.com\/codehim\/\",\"https:\/\/www.youtube.com\/@codehim\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\",\"name\":\"Asif Mughal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"caption\":\"Asif Mughal\"},\"description\":\"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.\",\"sameAs\":[\"https:\/\/codehim.com\"],\"url\":\"https:\/\/codehim.com\/author\/asif-mughal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JavaScript Image Editor Add Text &#8212; CodeHim","description":"Here is a free code snippet to create a JavaScript Image Editor Add Text. You can view demo and download the source code.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codehim.com\/vanilla-javascript\/javascript-image-editor-add-text\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript Image Editor Add Text &#8212; CodeHim","og_description":"Here is a free code snippet to create a JavaScript Image Editor Add Text. You can view demo and download the source code.","og_url":"https:\/\/codehim.com\/vanilla-javascript\/javascript-image-editor-add-text\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-01-09T18:03:00+00:00","article_modified_time":"2024-01-22T11:05:10+00:00","og_image":[{"width":1280,"height":960,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/JavaScript-Image-Editor-Add-Text.png","type":"image\/png"}],"author":"Asif Mughal","twitter_card":"summary_large_image","twitter_creator":"@CodeHimOfficial","twitter_site":"@CodeHimOfficial","twitter_misc":{"Written by":"Asif Mughal","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/vanilla-javascript\/javascript-image-editor-add-text\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/javascript-image-editor-add-text\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"JavaScript Image Editor Add Text","datePublished":"2024-01-09T18:03:00+00:00","dateModified":"2024-01-22T11:05:10+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/javascript-image-editor-add-text\/"},"wordCount":215,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/javascript-image-editor-add-text\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/JavaScript-Image-Editor-Add-Text.png","articleSection":["Vanilla JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/vanilla-javascript\/javascript-image-editor-add-text\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/vanilla-javascript\/javascript-image-editor-add-text\/","url":"https:\/\/codehim.com\/vanilla-javascript\/javascript-image-editor-add-text\/","name":"JavaScript Image Editor Add Text &#8212; CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/javascript-image-editor-add-text\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/javascript-image-editor-add-text\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/JavaScript-Image-Editor-Add-Text.png","datePublished":"2024-01-09T18:03:00+00:00","dateModified":"2024-01-22T11:05:10+00:00","description":"Here is a free code snippet to create a JavaScript Image Editor Add Text. You can view demo and download the source code.","breadcrumb":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/javascript-image-editor-add-text\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/vanilla-javascript\/javascript-image-editor-add-text\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/vanilla-javascript\/javascript-image-editor-add-text\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/JavaScript-Image-Editor-Add-Text.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/JavaScript-Image-Editor-Add-Text.png","width":1280,"height":960,"caption":"JavaScript Image Editor Add Text"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/vanilla-javascript\/javascript-image-editor-add-text\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"Vanilla JavaScript","item":"https:\/\/codehim.com\/category\/vanilla-javascript\/"},{"@type":"ListItem","position":3,"name":"JavaScript Image Editor Add Text"}]},{"@type":"WebSite","@id":"https:\/\/codehim.com\/#website","url":"https:\/\/codehim.com\/","name":"CodeHim","description":"Web Design Code Snippets","publisher":{"@id":"https:\/\/codehim.com\/#organization"},"alternateName":"Web Design Codes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codehim.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codehim.com\/#organization","name":"CodeHim - Web Design Code & Scripts","url":"https:\/\/codehim.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/","url":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","contentUrl":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","width":280,"height":280,"caption":"CodeHim - Web Design Code & Scripts"},"image":{"@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codehimofficial","https:\/\/x.com\/CodeHimOfficial","https:\/\/www.instagram.com\/codehim\/","https:\/\/www.linkedin.com\/company\/codehim","https:\/\/co.pinterest.com\/codehim\/","https:\/\/www.youtube.com\/@codehim"]},{"@type":"Person","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed","name":"Asif Mughal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","caption":"Asif Mughal"},"description":"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.","sameAs":["https:\/\/codehim.com"],"url":"https:\/\/codehim.com\/author\/asif-mughal\/"}]}},"views":1866,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/9523","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/comments?post=9523"}],"version-history":[{"count":0,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/9523\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/9541"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=9523"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=9523"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=9523"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}