使用类似Gmail添加计数的图像处理技术实现动态网站图标

Question

使用类似Gmail添加计数的图像处理技术实现动态网站图标

javascriptcanvasdynamicfavicon

38

我试着查看源代码，但是我无法理解它。

我想知道如何制作类似Gmail的动态收藏夹图标并显示计数。

在此输入图片描述

有什么想法吗？

- Santiago

1

请注意，Chrome的动态网站图标实现存在缺陷，并且使用了过多的CPU资源。请参阅http://code.google.com/p/chromium/issues/detail?id=121333。 - brillout

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Loktar · Accepted Answer

你可以使用 canvas 元素创建一张图片，然后将当前的网站图标替换为它。请查看以下链接以获取详细解释。参考代码来自上述参考。标记

<link id="favicon" rel="icon" type="image/png" href="image.png" />

JS

  (function () {
    var canvas = document.createElement('canvas'),
        ctx,
        img = document.createElement('img'),
        link = document.getElementById('favicon').cloneNode(true),
        day = (new Date).getDate() + '';
    
    if (canvas.getContext) {
      canvas.height = canvas.width = 16; // set the size
      ctx = canvas.getContext('2d');
      img.onload = function () { // once the image has loaded
        ctx.drawImage(this, 0, 0);
        ctx.font = 'bold 10px "helvetica", sans-serif';
        ctx.fillStyle = '#F0EEDD';
        if (day.length == 1) day = '0' + day;
        ctx.fillText(day, 2, 12);
        link.href = canvas.toDataURL('image/png');
        document.body.appendChild(link);
      };
      img.src = 'image.png';
    }
    
    })();

编辑

必须同时设置一张图片。