Avatar Maker<\/title>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <style>\n \/* Minimal styling similar to previous tools *\/\n body {\n font-family: Arial, sans-serif;\n background-color: #f7f7f7;\n margin: 20px;\n text-align: center;\n }\n .container {\n background: #fff;\n padding: 20px;\n border-radius: 8px;\n box-shadow: 0 0 10px rgba(0,0,0,0.1);\n max-width: 500px;\n margin: 0 auto;\n box-sizing: border-box;\n }\n input, button {\n margin: 10px;\n padding: 10px;\n font-size: 16px;\n }\n canvas {\n border: 1px solid #ccc;\n margin-top: 20px;\n display: block;\n margin-left: auto;\n margin-right: auto;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n \n <input type=\"file\" id=\"file-input\" accept=\"image\/*\">\n <br>\n <button id=\"generate-button\">Generate Avatar<\/button>\n <button id=\"clear-button\">Clear<\/button>\n <button id=\"save-button\">Save Avatar<\/button>\n <br>\n <canvas id=\"canvas\"><\/canvas>\n <\/div>\n\n <script>\n document.addEventListener('DOMContentLoaded', function(){\n const fileInput = document.getElementById('file-input');\n const generateButton = document.getElementById('generate-button');\n const clearButton = document.getElementById('clear-button');\n const saveButton = document.getElementById('save-button');\n const canvas = document.getElementById('canvas');\n const ctx = canvas.getContext('2d');\n \n let originalImage = null;\n \n \/\/ Handle file selection\n fileInput.addEventListener('change', function(){\n const file = fileInput.files[0];\n if (file && file.type.startsWith('image\/')) {\n const reader = new FileReader();\n reader.onload = function(e) {\n const img = new Image();\n img.onload = function(){\n originalImage = img;\n \/\/ For a square avatar, use the smallest dimension and center-crop the image\n const size = Math.min(img.width, img.height);\n canvas.width = size;\n canvas.height = size;\n const sx = (img.width - size) \/ 2;\n const sy = (img.height - size) \/ 2;\n ctx.drawImage(img, sx, sy, size, size, 0, 0, size, size);\n };\n img.onerror = function(){\n alert(\"Error loading image. Please try a different file.\");\n };\n img.src = e.target.result;\n };\n reader.onerror = function(){\n alert(\"Error reading file. Please try again.\");\n };\n reader.readAsDataURL(file);\n } else {\n alert(\"Please upload a valid image file.\");\n }\n });\n \n \/\/ Generate avatar: apply a circular mask to the square image on the canvas\n generateButton.addEventListener('click', function(){\n if (!originalImage) {\n alert(\"Please select an image first.\");\n return;\n }\n const size = canvas.width;\n \/\/ Use globalCompositeOperation to mask out the area outside the circle\n ctx.globalCompositeOperation = 'destination-in';\n ctx.beginPath();\n ctx.arc(size \/ 2, size \/ 2, size \/ 2, 0, Math.PI * 2);\n ctx.closePath();\n ctx.fill();\n ctx.globalCompositeOperation = 'source-over';\n });\n \n \/\/ Clear the canvas and reset\n clearButton.addEventListener('click', function(){\n originalImage = null;\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n canvas.width = 0;\n canvas.height = 0;\n fileInput.value = \"\";\n });\n \n \/\/ Save the resulting avatar as a PNG\n saveButton.addEventListener('click', function(){\n if (canvas.width === 0 || canvas.height === 0) {\n alert(\"No avatar to save.\");\n return;\n }\n const link = document.createElement('a');\n link.download = 'avatar.png';\n link.href = canvas.toDataURL('image\/png');\n link.click();\n });\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Stuff Avatar Maker Generate Avatar Clear Save Avatar<\/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-664","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/pages\/664","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=664"}],"version-history":[{"count":3,"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/pages\/664\/revisions"}],"predecessor-version":[{"id":742,"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/pages\/664\/revisions\/742"}],"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=664"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":664,"date":"2025-02-23T19:26:52","date_gmt":"2025-02-23T19:26:52","guid":{"rendered":"https:\/\/divbydev.com\/?page_id=664"},"modified":"2025-03-13T04:54:57","modified_gmt":"2025-03-13T04:54:57","slug":"circular-pfp-avatar-image-creator","status":"publish","type":"page","link":"https:\/\/divbydev.com\/index.php\/projects-2\/circular-pfp-avatar-image-creator\/","title":{"rendered":"Circular PFP\/Avatar Image Creator"},"content":{"rendered":"\n

Stuff<\/p>\n\n\n\n\n\n\n \n Avatar Maker<\/title>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <style>\n \/* Minimal styling similar to previous tools *\/\n body {\n font-family: Arial, sans-serif;\n background-color: #f7f7f7;\n margin: 20px;\n text-align: center;\n }\n .container {\n background: #fff;\n padding: 20px;\n border-radius: 8px;\n box-shadow: 0 0 10px rgba(0,0,0,0.1);\n max-width: 500px;\n margin: 0 auto;\n box-sizing: border-box;\n }\n input, button {\n margin: 10px;\n padding: 10px;\n font-size: 16px;\n }\n canvas {\n border: 1px solid #ccc;\n margin-top: 20px;\n display: block;\n margin-left: auto;\n margin-right: auto;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n \n <input type=\"file\" id=\"file-input\" accept=\"image\/*\">\n <br>\n <button id=\"generate-button\">Generate Avatar<\/button>\n <button id=\"clear-button\">Clear<\/button>\n <button id=\"save-button\">Save Avatar<\/button>\n <br>\n <canvas id=\"canvas\"><\/canvas>\n <\/div>\n\n <script>\n document.addEventListener('DOMContentLoaded', function(){\n const fileInput = document.getElementById('file-input');\n const generateButton = document.getElementById('generate-button');\n const clearButton = document.getElementById('clear-button');\n const saveButton = document.getElementById('save-button');\n const canvas = document.getElementById('canvas');\n const ctx = canvas.getContext('2d');\n \n let originalImage = null;\n \n \/\/ Handle file selection\n fileInput.addEventListener('change', function(){\n const file = fileInput.files[0];\n if (file && file.type.startsWith('image\/')) {\n const reader = new FileReader();\n reader.onload = function(e) {\n const img = new Image();\n img.onload = function(){\n originalImage = img;\n \/\/ For a square avatar, use the smallest dimension and center-crop the image\n const size = Math.min(img.width, img.height);\n canvas.width = size;\n canvas.height = size;\n const sx = (img.width - size) \/ 2;\n const sy = (img.height - size) \/ 2;\n ctx.drawImage(img, sx, sy, size, size, 0, 0, size, size);\n };\n img.onerror = function(){\n alert(\"Error loading image. Please try a different file.\");\n };\n img.src = e.target.result;\n };\n reader.onerror = function(){\n alert(\"Error reading file. Please try again.\");\n };\n reader.readAsDataURL(file);\n } else {\n alert(\"Please upload a valid image file.\");\n }\n });\n \n \/\/ Generate avatar: apply a circular mask to the square image on the canvas\n generateButton.addEventListener('click', function(){\n if (!originalImage) {\n alert(\"Please select an image first.\");\n return;\n }\n const size = canvas.width;\n \/\/ Use globalCompositeOperation to mask out the area outside the circle\n ctx.globalCompositeOperation = 'destination-in';\n ctx.beginPath();\n ctx.arc(size \/ 2, size \/ 2, size \/ 2, 0, Math.PI * 2);\n ctx.closePath();\n ctx.fill();\n ctx.globalCompositeOperation = 'source-over';\n });\n \n \/\/ Clear the canvas and reset\n clearButton.addEventListener('click', function(){\n originalImage = null;\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n canvas.width = 0;\n canvas.height = 0;\n fileInput.value = \"\";\n });\n \n \/\/ Save the resulting avatar as a PNG\n saveButton.addEventListener('click', function(){\n if (canvas.width === 0 || canvas.height === 0) {\n alert(\"No avatar to save.\");\n return;\n }\n const link = document.createElement('a');\n link.download = 'avatar.png';\n link.href = canvas.toDataURL('image\/png');\n link.click();\n });\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Stuff Avatar Maker Generate Avatar Clear Save Avatar<\/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-664","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/pages\/664","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=664"}],"version-history":[{"count":3,"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/pages\/664\/revisions"}],"predecessor-version":[{"id":742,"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/pages\/664\/revisions\/742"}],"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=664"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}