Last active
October 18, 2024 19:48
-
-
Save angusdev/ad6f3d379be2a118151c5b17493d626c to your computer and use it in GitHub Desktop.
genicon.js - Generate icon with text
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| change_favicon_color=(c)=>{u=window.top.document.querySelector('link[rel="icon"], link[rel="shortcut icon"]');if(u.href.startsWith('data:')){console.log('Favicon is already a data URL.');return;}fetch(u.href).then(r=>r.blob()).then(b=>{i=new Image();i.src=URL.createObjectURL(b);i.onload=()=>{a=document.createElement('canvas'),ctx=a.getContext('2d');a.width=i.width;a.height=i.height;ctx.drawImage(i,0,0);ctx.globalCompositeOperation='source-in';ctx.fillStyle=c;ctx.fillRect(0,0,a.width,a.height);u.href=a.toDataURL('image/x-icon');}})}; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| genicon=(w,b,c,t)=>{a=document.createElement('canvas');d=a.getContext('2d');a.width=a.height=w;d.fillStyle=b;d.beginPath();d.arc(w/2,w/2,(w/2)-2,0,Math.PI*2,false);d.fill();d.fillStyle=c;if(t){d.font=`bold ${w/2}px sans-serif`;d.textAlign='center';d.textBaseline='middle';d.fillText(t,w/2,w/2);}return a.toDataURL();}; | |
| // Example usage: | |
| i=genicon(32,'red','white','R'); // with text | |
| j=genicon(32,'blue'); // without text |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment