Favicon generado dinámicamente

Question

¿Sería posible usar solo JavaScript y HTML para generar dinámicamente un favicon, utilizando el favicon de la página actual como fondo y un número aleatorio en primer plano?

Por ejemplo, digamos el favicon actual es similar a esto:

====================== 
====XXXXXXXXXXXXXX==== 
====X================= 
====X================= 
====X=====XXXXXXXX==== 
====X============X==== 
====X============X==== 
====XXXXXXXXXXXXXX==== 
====================== 

Si es posible, ¿cómo iba a conseguir que se vea algo similar a esto usando sólo JavaScript y HTML:

====================== 
====XXXXXXXXXXXXXX==== 
====X================= 
====X================= 
====X=====XXXXXXXX==== 
====X=========--111--= 
====X=========--1-1--= 
====XXXXXXXXXX----1--= 
==============--1111-= 

mapa:
=: fondo blanco
x: imagen original Favicon
-: Imagen generada rojo con un número
1: El texto blanco

ideas:

• lienzo?
• Datos Uri's?

Answer 1

EDIT: tengo trabajo con

var canvas = document.createElement('canvas'); 
    canvas.width = 16;canvas.height = 16; 
    var ctx = canvas.getContext('2d'); 
    var img = new Image(); 
    img.src = '/favicon.ico'; 
    img.onload = function() { 
     ctx.drawImage(img, 0, 0); 
     ctx.fillStyle = "#F00"; 
     ctx.fillRect(10, 7, 6, 8); 
     ctx.fillStyle = '#FFFFFF'; 
     ctx.font = 'bold 10px sans-serif'; 
     ctx.fillText('2', 10, 14); 

     var link = document.createElement('link'); 
     link.type = 'image/x-icon'; 
     link.rel = 'shortcut icon'; 
     link.href = canvas.toDataURL("image/x-icon"); 
     document.getElementsByTagName('head')[0].appendChild(link); 
    } 

En realidad se puede ejecutar cromo y pega este:

javascript: var canvas = document.createElement('canvas');canvas.width = 16;canvas.height = 16;var ctx = canvas.getContext('2d');var img = new Image();img.src = '/favicon.ico';img.onload = function() {ctx.drawImage(img, 0, 0);ctx.fillStyle = "#F00";ctx.fillRect(10, 7, 6, 8);ctx.fillStyle = '#FFFFFF';ctx.font = 'bold 10px sans-serif';ctx.fillText('2', 10, 14);var link = document.createElement('link');link.type = 'image/x-icon';link.rel = 'shortcut icon';link.href = canvas.toDataURL("image/x-icon");document.getElementsByTagName('head')[0].appendChild(link);} 

en el navegador y verlo en acción.

Answer 2

No sé cómo hacerlo todo en el navegador, pero sería fácil tener un punto final del servidor que aceptara los parámetros en la URL y devolviera un favicon compuesto. Entonces, Javascript podría modificar la URL de favicon para obtener la imagen que deseaba.

Answer 3

Puede consultar this question, donde se explica cómo cambiar dinámicamente el favicon. También here is a site que dice jugar un juego en el favicon usando solo JavaScript, lienzo y el URI de datos, que debería funcionar en todos los navegadores modernos excepto en IE. No estoy seguro si eso satisfaría sus requisitos o no, pero puede probar la ingeniería inversa de cómo funciona.

Aquí hay un SO answer que explica cómo usar el elemento canvas para leer los datos de favicon y obtener los datos de la imagen, que luego se pueden modificar y componer en un nuevo icono.

Answer 4

favicon.js hace exactamente esto. Esta biblioteca puede mostrar un contador en la esquina inferior derecha del favicon, entre otras características.