Javascript 动态生成favicon

是否可以仅使用JavaScript和HTML动态生成一个favicon，使用当前页面的favicon作为背景，并在前景中使用一个随机数

例如，假设当前的favicon看起来与此类似：

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

如果可能的话，我如何让它看起来与此类似，只使用JavaScript和HTML：

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

地图：

=

：白色背景

x

：原始Favicon图像

-

：红色生成的带有数字的图像

1

：白色文本

想法：

• 帆布
• 数据Uri的

---

我不知道如何在浏览器中完成这一切，但如果有一个服务器端点接受URL中的参数并返回一个组合的favicon，那就很容易了。然后Javascript可以修改favicon url以获得它想要的图像。

您可以看一看，其中讨论了如何动态更改favicon。另外，该公司声称只使用JavaScript、canvas和数据URI在favicon中玩游戏，这在除IE之外的所有现代浏览器中都应该可以使用。不确定这是否满足您的要求，但您可以尝试反向工程它的工作方式

---

下面是一个示例，说明了如何使用canvas元素读取favicon数据并获取图像数据，然后可以修改图像数据并将其合成为一个新图标。

编辑：使用它

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);
    }

您可以实际运行chrome并粘贴以下内容：

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);}

进入浏览器并查看它的运行情况

正是这样做的。此库可以在favicon的右下角显示计数器，以及其他功能

---

哇，1实际上是红色的。。。但我想要的恰恰相反。

1

将是白色的，

-

将是红色的。您是想用这个新图像在浏览器上修改用户当前的favicon，还是将其显示在屏幕上的某个地方？@mellamokb将其修改为包含一个数字，除非有一个免费的公共服务器，服务器目前不可用：（我想说的是，我希望在浏览器中使用服务器作为最后手段；）@NedBatchelder我想知道WordPress.com是否就是用动态生成的favicon类型图像为Gravatar提供评论的。只是它使用IP地址而不是URL来生成图像，并且图像是从静态（相当小）的预先限制集中选择的。我刚才说的有点傻。这是无缘无故的，因为我真的想说，在StackOverflow上看到你真是太棒了！今天我写了一篇关于你在2007年讨论的一个话题的博客文章。我是从Tumblr的后端工程师那里得到这个想法的，他推荐了你2007年的帖子。太酷了！一些注意事项：如前所述，这不会在所有浏览器上都起作用。如果favicon是从页面所在的另一个域加载的，这也会失败-请参见@Yi:Atm，这将仅用于Google Chrome和某些页面。不过，到目前为止，你提供给我的链接对我帮助很大。谢谢所以我认为如果你真的想让你的webapp这么做，一个合理的方法就是在服务器端实现一个favicon渲染器。不过非常酷，即使它只是chrome。我得到

SecurityError:无法在“HTMLCanvasElement”上执行“toDataURL”：可能无法导出受污染的画布。