{"id":108,"date":"2024-05-31T03:05:58","date_gmt":"2024-05-31T03:05:58","guid":{"rendered":"https:\/\/codingindialab.com\/blog\/?p=108"},"modified":"2026-04-06T04:59:46","modified_gmt":"2026-04-06T04:59:46","slug":"how-to-create-custom-meme-in-html-jquery","status":"publish","type":"post","link":"https:\/\/codingindialab.com\/blog\/how-to-create-custom-meme-in-html-jquery\/","title":{"rendered":"How To Create Custom Meme in HTML  jQuery"},"content":{"rendered":"<p>To create a custom meme. First, You have to create an HTML form. After making the HTML form, you will define an input field in it which will be a file and if we upload the file or do any functionality or work with the file, then it is compulsory to define <strong>enctype=&#8221;multipart\/form-data&#8221;<\/strong> in the form.<\/p>\n<h2>Let&#8217;s see what things you may need to create a custom meme:<\/h2>\n<ul>\n<li>Create one HTML structure<\/li>\n<li>Create Form<\/li>\n<li>Add input type file<\/li>\n<li>Add Top Text Field<\/li>\n<li>Add Bottom Text Filed<\/li>\n<li>Add Font Size<\/li>\n<li>Change font color<\/li>\n<li>Generate Meme Button<\/li>\n<\/ul>\n<h2>\u00a0Create one HTML structure<\/h2>\n<p>To create a Custom Meme, First, we have to create an HTML structure in which we will define all our HTML codes.<\/p>\n<h2>Create form<\/h2>\n<p>We will create a form tag, In this we will define all our fields step by step:<\/p>\n<h3>a: Add input type file:<\/h3>\n<p>First, we will define an input-type file from where we will call the file from our local storage. As soon as you select the image it will be shown in the browser. You can check it.<\/p>\n<h3>b: Add Top Text Field<\/h3>\n<p>You can also add a custom name in the top area of \u200b\u200byour image, there is a field for you to add the name<\/p>\n<h3>c: Add Bottom Text Field<\/h3>\n<p>We have also created a bottom field here where you can go to the bottom of your image and add the name as per your choice.<\/p>\n<h3>d: Add Font Size<\/h3>\n<p>To adjust the font size of the top area and bottom area in the image, we have also created a font size field where you can increase or decrease the font size as per your requirements.<\/p>\n<h3>e: Change Font Color<\/h3>\n<p>We have also provided a font color change option where user can change the font color according to their choice<\/p>\n<h3>f: Generate Meme Button<\/h3>\n<p>After this there is a Generate Meme Button, by clicking on that button you can generate the name, and after clicking on the button a download button will be visible, by clicking on that button you can download the name in JPG format and you can use it anywhere.<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"alignnone \" src=\"https:\/\/i0.wp.com\/codingindialab.com\/blog\/wp-content\/uploads\/2024\/05\/Meme-Generator.png?resize=498%2C509&#038;ssl=1\" alt=\"meme-generator\" width=\"498\" height=\"509\" \/><\/p>\n<h3>Below is the source code just copy and paste it into your upcoming project.<\/h3>\n<h4>HTML Code:<\/h4>\n<p>&lt;h1&gt;Meme Generator&lt;\/h1&gt;<br \/>\n&lt;form id=&#8221;meme-form&#8221; enctype=&#8221;multipart\/form-data&#8221;&gt;<br \/>\n&lt;div class=&#8221;input-field&#8221;&gt;<br \/>\n&lt;label for=&#8221;image&#8221;&gt;Upload Image:&lt;\/label&gt;<br \/>\n&lt;input type=&#8221;file&#8221; id=&#8221;image&#8221; name=&#8221;image&#8221; accept=&#8221;image\/*&#8221;&gt;<br \/>\n&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;input-field&#8221;&gt;<br \/>\n&lt;label for=&#8221;top-text&#8221;&gt;Top Text:&lt;\/label&gt;<br \/>\n&lt;input type=&#8221;text&#8221; id=&#8221;top-text&#8221; name=&#8221;top-text&#8221;&gt;<br \/>\n&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;input-field&#8221;&gt;<br \/>\n&lt;label for=&#8221;bottom-text&#8221;&gt;Bottom Text:&lt;\/label&gt;<br \/>\n&lt;input type=&#8221;text&#8221; id=&#8221;bottom-text&#8221; name=&#8221;bottom-text&#8221;&gt;<br \/>\n&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;input-field&#8221;&gt;<br \/>\n&lt;label for=&#8221;font-size&#8221;&gt;Font Size:&lt;\/label&gt;<br \/>\n&lt;input type=&#8221;number&#8221; id=&#8221;font-size&#8221; name=&#8221;font-size&#8221; value=&#8221;30&#8243; min=&#8221;10&#8243; max=&#8221;100&#8243;&gt;<br \/>\n&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;input-field&#8221;&gt;<br \/>\n&lt;label for=&#8221;font-color&#8221;&gt;Font Color:&lt;\/label&gt;<br \/>\n&lt;input type=&#8221;color&#8221; id=&#8221;font-color&#8221; name=&#8221;font-color&#8221; value=&#8221;#ffffff&#8221;&gt;<br \/>\n&lt;\/div&gt;<br \/>\n&lt;button type=&#8221;submit&#8221;&gt;Generate Meme&lt;\/button&gt;<br \/>\n&lt;\/form&gt;<br \/>\n&lt;canvas id=&#8221;meme-canvas&#8221; width=&#8221;500&#8243; height=&#8221;500&#8243;&gt;&lt;\/canvas&gt;<br \/>\n&lt;button id=&#8221;downloadBtn&#8221; style=&#8221;display: none;&#8221;&gt;Download Meme&lt;\/button&gt;<\/p>\n<h4>jQuery library:<\/h4>\n<p>&lt;script src=&#8221;https:\/\/code.jquery.com\/jquery-3.6.0.min.js&#8221;&gt;&lt;\/script&gt;<\/p>\n<h4>JavaScript Code:<\/h4>\n<p>&lt;script&gt;<br \/>\n$(document).ready(function() {<br \/>\nvar canvas = document.getElementById(&#8216;meme-canvas&#8217;);<br \/>\nvar context = canvas.getContext(&#8216;2d&#8217;);<br \/>\nvar image = new Image();<br \/>\nvar dragText = null;<br \/>\nvar dragOffsetX = 0;<br \/>\nvar dragOffsetY = 0;<\/p>\n<p>function drawMeme() {<br \/>\ncontext.clearRect(0, 0, canvas.width, canvas.height);<br \/>\ncontext.drawImage(image, 0, 0, canvas.width, canvas.height);<\/p>\n<p>var topText = $(&#8216;#top-text&#8217;).val();<br \/>\nvar bottomText = $(&#8216;#bottom-text&#8217;).val();<br \/>\nvar fontSize = $(&#8216;#font-size&#8217;).val();<br \/>\nvar fontColor = $(&#8216;#font-color&#8217;).val();<\/p>\n<p>context.font = fontSize + &#8216;px Impact&#8217;;<br \/>\ncontext.fillStyle = fontColor;<br \/>\ncontext.strokeStyle = &#8216;black&#8217;;<br \/>\ncontext.lineWidth = 2;<br \/>\ncontext.textAlign = &#8216;center&#8217;;<\/p>\n<p>\/\/ Draw top text<br \/>\ncontext.fillText(topText, canvas.width \/ 2, 40);<br \/>\ncontext.strokeText(topText, canvas.width \/ 2, 40);<\/p>\n<p>\/\/ Draw bottom text<br \/>\ncontext.fillText(bottomText, canvas.width \/ 2, canvas.height &#8211; 20);<br \/>\ncontext.strokeText(bottomText, canvas.width \/ 2, canvas.height &#8211; 20);<br \/>\n}<\/p>\n<p>$(&#8216;#image&#8217;).on(&#8216;change&#8217;, function(event) {<br \/>\nvar reader = new FileReader();<br \/>\nreader.onload = function(e) {<br \/>\nimage.onload = function() {<br \/>\ncanvas.width = image.width;<br \/>\ncanvas.height = image.height;<br \/>\ndrawMeme();<br \/>\n};<br \/>\nimage.src = e.target.result;<br \/>\n};<br \/>\nreader.readAsDataURL(event.target.files[0]);<br \/>\n});<\/p>\n<p>$(&#8216;#top-text, #bottom-text, #font-size, #font-color&#8217;).on(&#8216;input&#8217;, function() {<br \/>\ndrawMeme();<br \/>\n});<\/p>\n<p>$(&#8216;#meme-form&#8217;).on(&#8216;submit&#8217;, function(event) {<br \/>\nevent.preventDefault();<br \/>\ndrawMeme();<br \/>\n$(&#8216;#downloadBtn&#8217;).show();<br \/>\n});<\/p>\n<p>$(&#8216;#downloadBtn&#8217;).on(&#8216;click&#8217;, function() {<br \/>\nvar link = document.createElement(&#8216;a&#8217;);<br \/>\nlink.download = &#8216;meme.png&#8217;;<br \/>\nlink.href = canvas.toDataURL();<br \/>\nlink.click();<br \/>\n});<\/p>\n<p>canvas.addEventListener(&#8216;mousedown&#8217;, function(e) {<br \/>\nvar mouseX = e.clientX &#8211; canvas.getBoundingClientRect().left;<br \/>\nvar mouseY = e.clientY &#8211; canvas.getBoundingClientRect().top;<br \/>\nvar topText = $(&#8216;#top-text&#8217;).val();<br \/>\nvar bottomText = $(&#8216;#bottom-text&#8217;).val();<br \/>\nvar fontSize = $(&#8216;#font-size&#8217;).val();<br \/>\nvar fontColor = $(&#8216;#font-color&#8217;).val();<\/p>\n<p>if (mouseX &gt;= canvas.width \/ 2 &#8211; context.measureText(topText).width \/ 2 &amp;&amp;<br \/>\nmouseX &lt;= canvas.width \/ 2 + context.measureText(topText).width \/ 2 &amp;&amp;<br \/>\nmouseY &gt;= 40 &#8211; fontSize &amp;&amp;<br \/>\nmouseY &lt;= 40) {<br \/>\ndragText = $(&#8216;#top-text&#8217;);<br \/>\ndragOffsetX = mouseX &#8211; (canvas.width \/ 2);<br \/>\ndragOffsetY = mouseY &#8211; (40 &#8211; fontSize);<br \/>\n} else if (mouseX &gt;= canvas.width \/ 2 &#8211; context.measureText(bottomText).width \/ 2 &amp;&amp;<br \/>\nmouseX &lt;= canvas.width \/ 2 + context.measureText(bottomText).width \/ 2 &amp;&amp;<br \/>\nmouseY &gt;= canvas.height &#8211; 20 &#8211; fontSize &amp;&amp;<br \/>\nmouseY &lt;= canvas.height &#8211; 20) {<br \/>\ndragText = $(&#8216;#bottom-text&#8217;);<br \/>\ndragOffsetX = mouseX &#8211; (canvas.width \/ 2);<br \/>\ndragOffsetY = mouseY &#8211; (canvas.height &#8211; 20 &#8211; fontSize);<br \/>\n}<br \/>\n});<\/p>\n<p>canvas.addEventListener(&#8216;mousemove&#8217;, function(e) {<br \/>\nif (dragText) {<br \/>\nvar mouseX = e.clientX &#8211; canvas.getBoundingClientRect().left;<br \/>\nvar mouseY = e.clientY &#8211; canvas.getBoundingClientRect().top;<br \/>\ndragText.css({<br \/>\ntop: mouseY &#8211; dragOffsetY,<br \/>\nleft: mouseX &#8211; dragOffsetX<br \/>\n});<br \/>\n}<br \/>\n});<\/p>\n<p>canvas.addEventListener(&#8216;mouseup&#8217;, function() {<br \/>\ndragText = null;<br \/>\n});<br \/>\n});<br \/>\n&lt;\/script&gt;<\/p>\n<h4>Full Code:<\/h4>\n<p>&lt;!DOCTYPE html&gt;<br \/>\n&lt;html lang=&#8221;en&#8221;&gt;<br \/>\n&lt;head&gt;<br \/>\n&lt;meta charset=&#8221;UTF-8&#8243;&gt;<br \/>\n&lt;meta name=&#8221;viewport&#8221; content=&#8221;width=device-width, initial-scale=1.0&#8243;&gt;<br \/>\n&lt;title&gt;Meme Generator&lt;\/title&gt;<br \/>\n&lt;style&gt;<br \/>\nbody {<br \/>\ntext-align: center;<br \/>\nfont-family: Arial, sans-serif;<br \/>\n}<br \/>\n#meme-canvas {<br \/>\nborder: 1px solid #000;<br \/>\nmargin-top: 20px;<br \/>\nposition: relative;<br \/>\n}<br \/>\n.input-field {<br \/>\nmargin-bottom: 10px;<br \/>\n}<br \/>\n.text-draggable {<br \/>\nposition: absolute;<br \/>\ncursor: move;<br \/>\n}<br \/>\n&lt;\/style&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body&gt;<br \/>\n&lt;h1&gt;Meme Generator&lt;\/h1&gt;<br \/>\n&lt;form id=&#8221;meme-form&#8221; enctype=&#8221;multipart\/form-data&#8221;&gt;<br \/>\n&lt;div class=&#8221;input-field&#8221;&gt;<br \/>\n&lt;label for=&#8221;image&#8221;&gt;Upload Image:&lt;\/label&gt;<br \/>\n&lt;input type=&#8221;file&#8221; id=&#8221;image&#8221; name=&#8221;image&#8221; accept=&#8221;image\/*&#8221;&gt;<br \/>\n&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;input-field&#8221;&gt;<br \/>\n&lt;label for=&#8221;top-text&#8221;&gt;Top Text:&lt;\/label&gt;<br \/>\n&lt;input type=&#8221;text&#8221; id=&#8221;top-text&#8221; name=&#8221;top-text&#8221;&gt;<br \/>\n&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;input-field&#8221;&gt;<br \/>\n&lt;label for=&#8221;bottom-text&#8221;&gt;Bottom Text:&lt;\/label&gt;<br \/>\n&lt;input type=&#8221;text&#8221; id=&#8221;bottom-text&#8221; name=&#8221;bottom-text&#8221;&gt;<br \/>\n&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;input-field&#8221;&gt;<br \/>\n&lt;label for=&#8221;font-size&#8221;&gt;Font Size:&lt;\/label&gt;<br \/>\n&lt;input type=&#8221;number&#8221; id=&#8221;font-size&#8221; name=&#8221;font-size&#8221; value=&#8221;30&#8243; min=&#8221;10&#8243; max=&#8221;100&#8243;&gt;<br \/>\n&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;input-field&#8221;&gt;<br \/>\n&lt;label for=&#8221;font-color&#8221;&gt;Font Color:&lt;\/label&gt;<br \/>\n&lt;input type=&#8221;color&#8221; id=&#8221;font-color&#8221; name=&#8221;font-color&#8221; value=&#8221;#ffffff&#8221;&gt;<br \/>\n&lt;\/div&gt;<br \/>\n&lt;button type=&#8221;submit&#8221;&gt;Generate Meme&lt;\/button&gt;<br \/>\n&lt;\/form&gt;<br \/>\n&lt;canvas id=&#8221;meme-canvas&#8221; width=&#8221;500&#8243; height=&#8221;500&#8243;&gt;&lt;\/canvas&gt;<br \/>\n&lt;button id=&#8221;downloadBtn&#8221; style=&#8221;display: none;&#8221;&gt;Download Meme&lt;\/button&gt;<br \/>\n&lt;script src=&#8221;https:\/\/code.jquery.com\/jquery-3.6.0.min.js&#8221;&gt;&lt;\/script&gt;<br \/>\n&lt;script&gt;<br \/>\n$(document).ready(function() {<br \/>\nvar canvas = document.getElementById(&#8216;meme-canvas&#8217;);<br \/>\nvar context = canvas.getContext(&#8216;2d&#8217;);<br \/>\nvar image = new Image();<br \/>\nvar dragText = null;<br \/>\nvar dragOffsetX = 0;<br \/>\nvar dragOffsetY = 0;<\/p>\n<p>function drawMeme() {<br \/>\ncontext.clearRect(0, 0, canvas.width, canvas.height);<br \/>\ncontext.drawImage(image, 0, 0, canvas.width, canvas.height);<\/p>\n<p>var topText = $(&#8216;#top-text&#8217;).val();<br \/>\nvar bottomText = $(&#8216;#bottom-text&#8217;).val();<br \/>\nvar fontSize = $(&#8216;#font-size&#8217;).val();<br \/>\nvar fontColor = $(&#8216;#font-color&#8217;).val();<\/p>\n<p>context.font = fontSize + &#8216;px Impact&#8217;;<br \/>\ncontext.fillStyle = fontColor;<br \/>\ncontext.strokeStyle = &#8216;black&#8217;;<br \/>\ncontext.lineWidth = 2;<br \/>\ncontext.textAlign = &#8216;center&#8217;;<\/p>\n<p>\/\/ Draw top text<br \/>\ncontext.fillText(topText, canvas.width \/ 2, 40);<br \/>\ncontext.strokeText(topText, canvas.width \/ 2, 40);<\/p>\n<p>\/\/ Draw bottom text<br \/>\ncontext.fillText(bottomText, canvas.width \/ 2, canvas.height &#8211; 20);<br \/>\ncontext.strokeText(bottomText, canvas.width \/ 2, canvas.height &#8211; 20);<br \/>\n}<\/p>\n<p>$(&#8216;#image&#8217;).on(&#8216;change&#8217;, function(event) {<br \/>\nvar reader = new FileReader();<br \/>\nreader.onload = function(e) {<br \/>\nimage.onload = function() {<br \/>\ncanvas.width = image.width;<br \/>\ncanvas.height = image.height;<br \/>\ndrawMeme();<br \/>\n};<br \/>\nimage.src = e.target.result;<br \/>\n};<br \/>\nreader.readAsDataURL(event.target.files[0]);<br \/>\n});<\/p>\n<p>$(&#8216;#top-text, #bottom-text, #font-size, #font-color&#8217;).on(&#8216;input&#8217;, function() {<br \/>\ndrawMeme();<br \/>\n});<\/p>\n<p>$(&#8216;#meme-form&#8217;).on(&#8216;submit&#8217;, function(event) {<br \/>\nevent.preventDefault();<br \/>\ndrawMeme();<br \/>\n$(&#8216;#downloadBtn&#8217;).show();<br \/>\n});<\/p>\n<p>$(&#8216;#downloadBtn&#8217;).on(&#8216;click&#8217;, function() {<br \/>\nvar link = document.createElement(&#8216;a&#8217;);<br \/>\nlink.download = &#8216;meme.png&#8217;;<br \/>\nlink.href = canvas.toDataURL();<br \/>\nlink.click();<br \/>\n});<\/p>\n<p>canvas.addEventListener(&#8216;mousedown&#8217;, function(e) {<br \/>\nvar mouseX = e.clientX &#8211; canvas.getBoundingClientRect().left;<br \/>\nvar mouseY = e.clientY &#8211; canvas.getBoundingClientRect().top;<br \/>\nvar topText = $(&#8216;#top-text&#8217;).val();<br \/>\nvar bottomText = $(&#8216;#bottom-text&#8217;).val();<br \/>\nvar fontSize = $(&#8216;#font-size&#8217;).val();<br \/>\nvar fontColor = $(&#8216;#font-color&#8217;).val();<\/p>\n<p>if (mouseX &gt;= canvas.width \/ 2 &#8211; context.measureText(topText).width \/ 2 &amp;&amp;<br \/>\nmouseX &lt;= canvas.width \/ 2 + context.measureText(topText).width \/ 2 &amp;&amp;<br \/>\nmouseY &gt;= 40 &#8211; fontSize &amp;&amp;<br \/>\nmouseY &lt;= 40) {<br \/>\ndragText = $(&#8216;#top-text&#8217;);<br \/>\ndragOffsetX = mouseX &#8211; (canvas.width \/ 2);<br \/>\ndragOffsetY = mouseY &#8211; (40 &#8211; fontSize);<br \/>\n} else if (mouseX &gt;= canvas.width \/ 2 &#8211; context.measureText(bottomText).width \/ 2 &amp;&amp;<br \/>\nmouseX &lt;= canvas.width \/ 2 + context.measureText(bottomText).width \/ 2 &amp;&amp;<br \/>\nmouseY &gt;= canvas.height &#8211; 20 &#8211; fontSize &amp;&amp;<br \/>\nmouseY &lt;= canvas.height &#8211; 20) {<br \/>\ndragText = $(&#8216;#bottom-text&#8217;);<br \/>\ndragOffsetX = mouseX &#8211; (canvas.width \/ 2);<br \/>\ndragOffsetY = mouseY &#8211; (canvas.height &#8211; 20 &#8211; fontSize);<br \/>\n}<br \/>\n});<\/p>\n<p>canvas.addEventListener(&#8216;mousemove&#8217;, function(e) {<br \/>\nif (dragText) {<br \/>\nvar mouseX = e.clientX &#8211; canvas.getBoundingClientRect().left;<br \/>\nvar mouseY = e.clientY &#8211; canvas.getBoundingClientRect().top;<br \/>\ndragText.css({<br \/>\ntop: mouseY &#8211; dragOffsetY,<br \/>\nleft: mouseX &#8211; dragOffsetX<br \/>\n});<br \/>\n}<br \/>\n});<\/p>\n<p>canvas.addEventListener(&#8216;mouseup&#8217;, function() {<br \/>\ndragText = null;<br \/>\n});<br \/>\n});<br \/>\n&lt;\/script&gt;<br \/>\n&lt;\/body&gt;<br \/>\n&lt;\/html&gt;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>To create a custom meme. First, You have to create an HTML form. After making&#8230;<\/p>\n","protected":false},"author":1,"featured_media":222,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[2,3],"tags":[],"class_list":["post-108","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html","category-jquery"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How To Create Custom Meme in HTML jQuery<\/title>\n<meta name=\"description\" content=\"How to create custom meme generator using html jQuery. We are providing you the full source code to create custom meme using html jQuery.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codingindialab.com\/blog\/how-to-create-custom-meme-in-html-jquery\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How To Create Custom Meme in HTML jQuery\" \/>\n<meta property=\"og:description\" content=\"How to create custom meme generator using html jQuery. We are providing you the full source code to create custom meme using html jQuery.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codingindialab.com\/blog\/how-to-create-custom-meme-in-html-jquery\/\" \/>\n<meta property=\"og:site_name\" content=\"Buy Tools - Coding India Lab\" \/>\n<meta property=\"article:published_time\" content=\"2024-05-31T03:05:58+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-06T04:59:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codingindialab.com\/blog\/wp-content\/uploads\/2024\/05\/how-to-create-custom-meme-in-html-jquery-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/codingindialab.com\\\/blog\\\/how-to-create-custom-meme-in-html-jquery\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/codingindialab.com\\\/blog\\\/how-to-create-custom-meme-in-html-jquery\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/codingindialab.com\\\/blog\\\/#\\\/schema\\\/person\\\/94a2d1f0e37a9a178ed9cd0a3aa7f3ce\"},\"headline\":\"How To Create Custom Meme in HTML jQuery\",\"datePublished\":\"2024-05-31T03:05:58+00:00\",\"dateModified\":\"2026-04-06T04:59:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/codingindialab.com\\\/blog\\\/how-to-create-custom-meme-in-html-jquery\\\/\"},\"wordCount\":1584,\"image\":{\"@id\":\"https:\\\/\\\/codingindialab.com\\\/blog\\\/how-to-create-custom-meme-in-html-jquery\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/codingindialab.com\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/05\\\/how-to-create-custom-meme-in-html-jquery-1.webp?fit=1920%2C500&ssl=1\",\"articleSection\":[\"html\",\"jquery\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/codingindialab.com\\\/blog\\\/how-to-create-custom-meme-in-html-jquery\\\/\",\"url\":\"https:\\\/\\\/codingindialab.com\\\/blog\\\/how-to-create-custom-meme-in-html-jquery\\\/\",\"name\":\"How To Create Custom Meme in HTML jQuery\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/codingindialab.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/codingindialab.com\\\/blog\\\/how-to-create-custom-meme-in-html-jquery\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/codingindialab.com\\\/blog\\\/how-to-create-custom-meme-in-html-jquery\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/codingindialab.com\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/05\\\/how-to-create-custom-meme-in-html-jquery-1.webp?fit=1920%2C500&ssl=1\",\"datePublished\":\"2024-05-31T03:05:58+00:00\",\"dateModified\":\"2026-04-06T04:59:46+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/codingindialab.com\\\/blog\\\/#\\\/schema\\\/person\\\/94a2d1f0e37a9a178ed9cd0a3aa7f3ce\"},\"description\":\"How to create custom meme generator using html jQuery. We are providing you the full source code to create custom meme using html jQuery.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/codingindialab.com\\\/blog\\\/how-to-create-custom-meme-in-html-jquery\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/codingindialab.com\\\/blog\\\/how-to-create-custom-meme-in-html-jquery\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/codingindialab.com\\\/blog\\\/how-to-create-custom-meme-in-html-jquery\\\/#primaryimage\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/codingindialab.com\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/05\\\/how-to-create-custom-meme-in-html-jquery-1.webp?fit=1920%2C500&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/codingindialab.com\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/05\\\/how-to-create-custom-meme-in-html-jquery-1.webp?fit=1920%2C500&ssl=1\",\"width\":1920,\"height\":500,\"caption\":\"How To Create Custom Meme in HTML jQuery\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/codingindialab.com\\\/blog\\\/how-to-create-custom-meme-in-html-jquery\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/codingindialab.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How To Create Custom Meme in HTML jQuery\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/codingindialab.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/codingindialab.com\\\/blog\\\/\",\"name\":\"Coding India\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/codingindialab.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/codingindialab.com\\\/blog\\\/#\\\/schema\\\/person\\\/94a2d1f0e37a9a178ed9cd0a3aa7f3ce\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cd5a9365f6d133d34466f8b64e07682be41ad59e15e64b8bda642df41823202e?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cd5a9365f6d133d34466f8b64e07682be41ad59e15e64b8bda642df41823202e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cd5a9365f6d133d34466f8b64e07682be41ad59e15e64b8bda642df41823202e?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"sameAs\":[\"https:\\\/\\\/codingindialab.com\\\/blog\"],\"url\":\"https:\\\/\\\/codingindialab.com\\\/blog\\\/author\\\/admin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How To Create Custom Meme in HTML jQuery","description":"How to create custom meme generator using html jQuery. We are providing you the full source code to create custom meme using html jQuery.","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:\/\/codingindialab.com\/blog\/how-to-create-custom-meme-in-html-jquery\/","og_locale":"en_US","og_type":"article","og_title":"How To Create Custom Meme in HTML jQuery","og_description":"How to create custom meme generator using html jQuery. We are providing you the full source code to create custom meme using html jQuery.","og_url":"https:\/\/codingindialab.com\/blog\/how-to-create-custom-meme-in-html-jquery\/","og_site_name":"Buy Tools - Coding India Lab","article_published_time":"2024-05-31T03:05:58+00:00","article_modified_time":"2026-04-06T04:59:46+00:00","og_image":[{"width":1920,"height":500,"url":"https:\/\/codingindialab.com\/blog\/wp-content\/uploads\/2024\/05\/how-to-create-custom-meme-in-html-jquery-1.png","type":"image\/png"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codingindialab.com\/blog\/how-to-create-custom-meme-in-html-jquery\/#article","isPartOf":{"@id":"https:\/\/codingindialab.com\/blog\/how-to-create-custom-meme-in-html-jquery\/"},"author":{"name":"admin","@id":"https:\/\/codingindialab.com\/blog\/#\/schema\/person\/94a2d1f0e37a9a178ed9cd0a3aa7f3ce"},"headline":"How To Create Custom Meme in HTML jQuery","datePublished":"2024-05-31T03:05:58+00:00","dateModified":"2026-04-06T04:59:46+00:00","mainEntityOfPage":{"@id":"https:\/\/codingindialab.com\/blog\/how-to-create-custom-meme-in-html-jquery\/"},"wordCount":1584,"image":{"@id":"https:\/\/codingindialab.com\/blog\/how-to-create-custom-meme-in-html-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/codingindialab.com\/blog\/wp-content\/uploads\/2024\/05\/how-to-create-custom-meme-in-html-jquery-1.webp?fit=1920%2C500&ssl=1","articleSection":["html","jquery"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/codingindialab.com\/blog\/how-to-create-custom-meme-in-html-jquery\/","url":"https:\/\/codingindialab.com\/blog\/how-to-create-custom-meme-in-html-jquery\/","name":"How To Create Custom Meme in HTML jQuery","isPartOf":{"@id":"https:\/\/codingindialab.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codingindialab.com\/blog\/how-to-create-custom-meme-in-html-jquery\/#primaryimage"},"image":{"@id":"https:\/\/codingindialab.com\/blog\/how-to-create-custom-meme-in-html-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/codingindialab.com\/blog\/wp-content\/uploads\/2024\/05\/how-to-create-custom-meme-in-html-jquery-1.webp?fit=1920%2C500&ssl=1","datePublished":"2024-05-31T03:05:58+00:00","dateModified":"2026-04-06T04:59:46+00:00","author":{"@id":"https:\/\/codingindialab.com\/blog\/#\/schema\/person\/94a2d1f0e37a9a178ed9cd0a3aa7f3ce"},"description":"How to create custom meme generator using html jQuery. We are providing you the full source code to create custom meme using html jQuery.","breadcrumb":{"@id":"https:\/\/codingindialab.com\/blog\/how-to-create-custom-meme-in-html-jquery\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codingindialab.com\/blog\/how-to-create-custom-meme-in-html-jquery\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codingindialab.com\/blog\/how-to-create-custom-meme-in-html-jquery\/#primaryimage","url":"https:\/\/i0.wp.com\/codingindialab.com\/blog\/wp-content\/uploads\/2024\/05\/how-to-create-custom-meme-in-html-jquery-1.webp?fit=1920%2C500&ssl=1","contentUrl":"https:\/\/i0.wp.com\/codingindialab.com\/blog\/wp-content\/uploads\/2024\/05\/how-to-create-custom-meme-in-html-jquery-1.webp?fit=1920%2C500&ssl=1","width":1920,"height":500,"caption":"How To Create Custom Meme in HTML jQuery"},{"@type":"BreadcrumbList","@id":"https:\/\/codingindialab.com\/blog\/how-to-create-custom-meme-in-html-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codingindialab.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How To Create Custom Meme in HTML jQuery"}]},{"@type":"WebSite","@id":"https:\/\/codingindialab.com\/blog\/#website","url":"https:\/\/codingindialab.com\/blog\/","name":"Coding India","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codingindialab.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/codingindialab.com\/blog\/#\/schema\/person\/94a2d1f0e37a9a178ed9cd0a3aa7f3ce","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/cd5a9365f6d133d34466f8b64e07682be41ad59e15e64b8bda642df41823202e?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/cd5a9365f6d133d34466f8b64e07682be41ad59e15e64b8bda642df41823202e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cd5a9365f6d133d34466f8b64e07682be41ad59e15e64b8bda642df41823202e?s=96&d=mm&r=g","caption":"admin"},"sameAs":["https:\/\/codingindialab.com\/blog"],"url":"https:\/\/codingindialab.com\/blog\/author\/admin\/"}]}},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codingindialab.com\/blog\/wp-content\/uploads\/2024\/05\/how-to-create-custom-meme-in-html-jquery-1.webp?fit=1920%2C500&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/codingindialab.com\/blog\/wp-json\/wp\/v2\/posts\/108","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codingindialab.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codingindialab.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codingindialab.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codingindialab.com\/blog\/wp-json\/wp\/v2\/comments?post=108"}],"version-history":[{"count":1,"href":"https:\/\/codingindialab.com\/blog\/wp-json\/wp\/v2\/posts\/108\/revisions"}],"predecessor-version":[{"id":223,"href":"https:\/\/codingindialab.com\/blog\/wp-json\/wp\/v2\/posts\/108\/revisions\/223"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codingindialab.com\/blog\/wp-json\/wp\/v2\/media\/222"}],"wp:attachment":[{"href":"https:\/\/codingindialab.com\/blog\/wp-json\/wp\/v2\/media?parent=108"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codingindialab.com\/blog\/wp-json\/wp\/v2\/categories?post=108"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codingindialab.com\/blog\/wp-json\/wp\/v2\/tags?post=108"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}