Vanilla Meme Generator<\/title>\n <style>\n body {\n font-family: Arial, sans-serif;\n text-align: center;\n background-color: #f2f2f2;\n margin: 0;\n padding: 20px;\n }\n h1 {\n margin-bottom: 20px;\n }\n .controls {\n margin-bottom: 20px;\n }\n .controls > div {\n margin: 10px 0;\n }\n .buttons {\n margin-top: 15px;\n }\n canvas {\n border: 1px solid #ccc;\n max-width: 100%;\n margin-top: 20px;\n }\n <\/style>\n<\/head>\n<body>\n <h1>Vanilla Meme Generator<\/h1>\n \n <div class=\"controls\">\n <div>\n <label for=\"imageInput\">Select Image:<\/label>\n <input type=\"file\" id=\"imageInput\" accept=\"image\/*\" required>\n <\/div>\n <div>\n <label for=\"topText\">Top Text:<\/label>\n <input type=\"text\" id=\"topText\" placeholder=\"Enter top text\" maxlength=\"100\" required>\n <\/div>\n <div>\n <label for=\"bottomText\">Bottom Text:<\/label>\n <input type=\"text\" id=\"bottomText\" placeholder=\"Enter bottom text\" maxlength=\"100\" required>\n <\/div>\n <div>\n <label for=\"topTextSize\">Top Text Font Size (px):<\/label>\n <input type=\"number\" id=\"topTextSize\" min=\"10\" max=\"200\" value=\"40\" required>\n <\/div>\n <div>\n <label for=\"bottomTextSize\">Bottom Text Font Size (px):<\/label>\n <input type=\"number\" id=\"bottomTextSize\" min=\"10\" max=\"200\" value=\"40\" required>\n <\/div>\n <div>\n <label for=\"topTextColor\">Top Text Color:<\/label>\n <input type=\"color\" id=\"topTextColor\" value=\"#ffffff\" required>\n <\/div>\n <div>\n <label for=\"bottomTextColor\">Bottom Text Color:<\/label>\n <input type=\"color\" id=\"bottomTextColor\" value=\"#ffffff\" required>\n <\/div>\n <div class=\"buttons\">\n <button id=\"generateBtn\">Generate Meme<\/button>\n <button id=\"downloadBtn\">Download Meme<\/button>\n <button id=\"clearBtn\">Clear<\/button>\n <\/div>\n <\/div>\n \n <canvas id=\"memeCanvas\"><\/canvas>\n \n <script>\n \/\/ Generate Meme: Draws the image and overlays texts on the canvas\n document.getElementById('generateBtn').addEventListener('click', function() {\n const imageInput = document.getElementById('imageInput');\n const topText = document.getElementById('topText').value;\n const bottomText = document.getElementById('bottomText').value;\n const topTextSize = parseInt(document.getElementById('topTextSize').value, 10);\n const bottomTextSize = parseInt(document.getElementById('bottomTextSize').value, 10);\n const topTextColor = document.getElementById('topTextColor').value;\n const bottomTextColor = document.getElementById('bottomTextColor').value;\n const canvas = document.getElementById('memeCanvas');\n const ctx = canvas.getContext('2d');\n \n if (imageInput.files && imageInput.files[0]) {\n const reader = new FileReader();\n reader.onload = function(e) {\n const img = new Image();\n img.onload = function() {\n \/\/ Set canvas dimensions to match the image\n canvas.width = img.width;\n canvas.height = img.height;\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n ctx.drawImage(img, 0, 0);\n \n \/\/ Set common text properties\n ctx.strokeStyle = 'black';\n ctx.lineWidth = 2;\n ctx.textAlign = 'center';\n \n \/\/ Draw top text\n ctx.font = `${topTextSize}px Impact`;\n ctx.textBaseline = 'top';\n ctx.fillStyle = topTextColor;\n drawText(ctx, topText.toUpperCase(), canvas.width \/ 2, 10, canvas.width - 20);\n \n \/\/ Draw bottom text\n ctx.font = `${bottomTextSize}px Impact`;\n ctx.textBaseline = 'bottom';\n ctx.fillStyle = bottomTextColor;\n drawText(ctx, bottomText.toUpperCase(), canvas.width \/ 2, canvas.height - 10, canvas.width - 20);\n };\n img.src = e.target.result;\n };\n reader.readAsDataURL(imageInput.files[0]);\n } else {\n alert(\"Please select an image file.\");\n }\n });\n\n \/\/ Helper function to draw text with fill and stroke for contrast\n function drawText(ctx, text, x, y, maxWidth) {\n ctx.fillText(text, x, y, maxWidth);\n ctx.strokeText(text, x, y, maxWidth);\n }\n\n \/\/ Download Meme: Uses canvas.toBlob to create a downloadable file\n document.getElementById('downloadBtn').addEventListener('click', function() {\n const canvas = document.getElementById('memeCanvas');\n canvas.toBlob(function(blob) {\n \/\/ Create an object URL and trigger a download\n const url = URL.createObjectURL(blob);\n const a = document.createElement('a');\n a.style.display = 'none';\n a.href = url;\n a.download = 'meme.png';\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n URL.revokeObjectURL(url);\n }, 'image\/png');\n });\n\n \/\/ Clear button: Resets inputs and clears the canvas\n document.getElementById('clearBtn').addEventListener('click', function() {\n \/\/ Reset file input\n const imageInput = document.getElementById('imageInput');\n imageInput.value = '';\n \n \/\/ Reset text inputs\n document.getElementById('topText').value = '';\n document.getElementById('bottomText').value = '';\n \n \/\/ Reset font sizes to default (40px)\n document.getElementById('topTextSize').value = 40;\n document.getElementById('bottomTextSize').value = 40;\n \n \/\/ Reset color pickers to white\n document.getElementById('topTextColor').value = '#ffffff';\n document.getElementById('bottomTextColor').value = '#ffffff';\n \n \/\/ Clear the canvas\n const canvas = document.getElementById('memeCanvas');\n const ctx = canvas.getContext('2d');\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n \/\/ Optionally reset canvas dimensions\n canvas.width = 0;\n canvas.height = 0;\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>use cases Vanilla Meme Generator Vanilla Meme Generator Select Image: Top Text: Bottom Text: Top Text Font Size (px): Bottom Text Font Size (px): Top Text Color: Bottom Text Color: Generate Meme Download Meme Clear<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":230,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-630","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/pages\/630","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/comments?post=630"}],"version-history":[{"count":1,"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/pages\/630\/revisions"}],"predecessor-version":[{"id":631,"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/pages\/630\/revisions\/631"}],"up":[{"embeddable":true,"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/pages\/230"}],"wp:attachment":[{"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/media?parent=630"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":630,"date":"2025-02-15T17:55:42","date_gmt":"2025-02-15T17:55:42","guid":{"rendered":"https:\/\/divbydev.com\/?page_id=630"},"modified":"2025-03-12T20:53:52","modified_gmt":"2025-03-12T20:53:52","slug":"vanilla-meme-generator","status":"publish","type":"page","link":"https:\/\/divbydev.com\/index.php\/projects-2\/vanilla-meme-generator\/","title":{"rendered":"Vanilla Meme Generator"},"content":{"rendered":"\n

use cases<\/p>\n\n\n\n\n\n\n \n Vanilla Meme Generator<\/title>\n <style>\n body {\n font-family: Arial, sans-serif;\n text-align: center;\n background-color: #f2f2f2;\n margin: 0;\n padding: 20px;\n }\n h1 {\n margin-bottom: 20px;\n }\n .controls {\n margin-bottom: 20px;\n }\n .controls > div {\n margin: 10px 0;\n }\n .buttons {\n margin-top: 15px;\n }\n canvas {\n border: 1px solid #ccc;\n max-width: 100%;\n margin-top: 20px;\n }\n <\/style>\n<\/head>\n<body>\n <h1>Vanilla Meme Generator<\/h1>\n \n <div class=\"controls\">\n <div>\n <label for=\"imageInput\">Select Image:<\/label>\n <input type=\"file\" id=\"imageInput\" accept=\"image\/*\" required>\n <\/div>\n <div>\n <label for=\"topText\">Top Text:<\/label>\n <input type=\"text\" id=\"topText\" placeholder=\"Enter top text\" maxlength=\"100\" required>\n <\/div>\n <div>\n <label for=\"bottomText\">Bottom Text:<\/label>\n <input type=\"text\" id=\"bottomText\" placeholder=\"Enter bottom text\" maxlength=\"100\" required>\n <\/div>\n <div>\n <label for=\"topTextSize\">Top Text Font Size (px):<\/label>\n <input type=\"number\" id=\"topTextSize\" min=\"10\" max=\"200\" value=\"40\" required>\n <\/div>\n <div>\n <label for=\"bottomTextSize\">Bottom Text Font Size (px):<\/label>\n <input type=\"number\" id=\"bottomTextSize\" min=\"10\" max=\"200\" value=\"40\" required>\n <\/div>\n <div>\n <label for=\"topTextColor\">Top Text Color:<\/label>\n <input type=\"color\" id=\"topTextColor\" value=\"#ffffff\" required>\n <\/div>\n <div>\n <label for=\"bottomTextColor\">Bottom Text Color:<\/label>\n <input type=\"color\" id=\"bottomTextColor\" value=\"#ffffff\" required>\n <\/div>\n <div class=\"buttons\">\n <button id=\"generateBtn\">Generate Meme<\/button>\n <button id=\"downloadBtn\">Download Meme<\/button>\n <button id=\"clearBtn\">Clear<\/button>\n <\/div>\n <\/div>\n \n <canvas id=\"memeCanvas\"><\/canvas>\n \n <script>\n \/\/ Generate Meme: Draws the image and overlays texts on the canvas\n document.getElementById('generateBtn').addEventListener('click', function() {\n const imageInput = document.getElementById('imageInput');\n const topText = document.getElementById('topText').value;\n const bottomText = document.getElementById('bottomText').value;\n const topTextSize = parseInt(document.getElementById('topTextSize').value, 10);\n const bottomTextSize = parseInt(document.getElementById('bottomTextSize').value, 10);\n const topTextColor = document.getElementById('topTextColor').value;\n const bottomTextColor = document.getElementById('bottomTextColor').value;\n const canvas = document.getElementById('memeCanvas');\n const ctx = canvas.getContext('2d');\n \n if (imageInput.files && imageInput.files[0]) {\n const reader = new FileReader();\n reader.onload = function(e) {\n const img = new Image();\n img.onload = function() {\n \/\/ Set canvas dimensions to match the image\n canvas.width = img.width;\n canvas.height = img.height;\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n ctx.drawImage(img, 0, 0);\n \n \/\/ Set common text properties\n ctx.strokeStyle = 'black';\n ctx.lineWidth = 2;\n ctx.textAlign = 'center';\n \n \/\/ Draw top text\n ctx.font = `${topTextSize}px Impact`;\n ctx.textBaseline = 'top';\n ctx.fillStyle = topTextColor;\n drawText(ctx, topText.toUpperCase(), canvas.width \/ 2, 10, canvas.width - 20);\n \n \/\/ Draw bottom text\n ctx.font = `${bottomTextSize}px Impact`;\n ctx.textBaseline = 'bottom';\n ctx.fillStyle = bottomTextColor;\n drawText(ctx, bottomText.toUpperCase(), canvas.width \/ 2, canvas.height - 10, canvas.width - 20);\n };\n img.src = e.target.result;\n };\n reader.readAsDataURL(imageInput.files[0]);\n } else {\n alert(\"Please select an image file.\");\n }\n });\n\n \/\/ Helper function to draw text with fill and stroke for contrast\n function drawText(ctx, text, x, y, maxWidth) {\n ctx.fillText(text, x, y, maxWidth);\n ctx.strokeText(text, x, y, maxWidth);\n }\n\n \/\/ Download Meme: Uses canvas.toBlob to create a downloadable file\n document.getElementById('downloadBtn').addEventListener('click', function() {\n const canvas = document.getElementById('memeCanvas');\n canvas.toBlob(function(blob) {\n \/\/ Create an object URL and trigger a download\n const url = URL.createObjectURL(blob);\n const a = document.createElement('a');\n a.style.display = 'none';\n a.href = url;\n a.download = 'meme.png';\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n URL.revokeObjectURL(url);\n }, 'image\/png');\n });\n\n \/\/ Clear button: Resets inputs and clears the canvas\n document.getElementById('clearBtn').addEventListener('click', function() {\n \/\/ Reset file input\n const imageInput = document.getElementById('imageInput');\n imageInput.value = '';\n \n \/\/ Reset text inputs\n document.getElementById('topText').value = '';\n document.getElementById('bottomText').value = '';\n \n \/\/ Reset font sizes to default (40px)\n document.getElementById('topTextSize').value = 40;\n document.getElementById('bottomTextSize').value = 40;\n \n \/\/ Reset color pickers to white\n document.getElementById('topTextColor').value = '#ffffff';\n document.getElementById('bottomTextColor').value = '#ffffff';\n \n \/\/ Clear the canvas\n const canvas = document.getElementById('memeCanvas');\n const ctx = canvas.getContext('2d');\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n \/\/ Optionally reset canvas dimensions\n canvas.width = 0;\n canvas.height = 0;\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>use cases Vanilla Meme Generator Vanilla Meme Generator Select Image: Top Text: Bottom Text: Top Text Font Size (px): Bottom Text Font Size (px): Top Text Color: Bottom Text Color: Generate Meme Download Meme Clear<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":230,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-630","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/pages\/630","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/comments?post=630"}],"version-history":[{"count":1,"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/pages\/630\/revisions"}],"predecessor-version":[{"id":631,"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/pages\/630\/revisions\/631"}],"up":[{"embeddable":true,"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/pages\/230"}],"wp:attachment":[{"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/media?parent=630"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}