动态生成的图标

时间:2011-08-06 01:14:04

标签: javascript html favicon html5-canvas

是否可以仅使用JavaScript和HTML动态生成图标,使用当前页面的图标作为背景,以及前景中的随机数?

例如,假设当前的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:白色文字

思路:

  • 帆布?
  • Data Uri's?

4 个答案:

答案 0 :(得分:53)

编辑:使用

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

进入浏览器并查看其实际效果。

enter image description here

答案 1 :(得分:15)

您可以查看this question,其中讨论了如何动态更改favicon。另外here is a site声称只使用JavaScript,画布和数据URI在favicon中玩游戏,这应该适用于除IE以外的所有现代浏览器。不确定这是否符合您的要求,但您可以尝试逆向工程如何工作。

这是一个SO answer,它解释了如何使用canvas元素读取favicon数据并获取图像数据,然后可以将其修改并组合成一个新图标。

答案 2 :(得分:4)

我不知道在浏览器中完成所有操作,但是很容易让服务器端点接受URL中的参数并返回组合的favicon。然后Javascript可以修改favicon网址以获得它想要的图像。

答案 3 :(得分:0)

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

enter image description here